Download as PDF, PPTX
Uploaded byTaller Negócio Digitais
Next.js with drupal, the good parts
The document discusses the integration of Next.js with Drupal, highlighting the benefits and experiences from various projects, including e-commerce and publishing sites. It emphasizes features like server-side rendering, GraphQL integration, and the flexibility of Next.js for building universal applications. The author also outlines future enhancements and community needs for better serverless support and improved caching mechanisms.
More Related Content
Similar to Next.js with drupal, the good parts
Next.js with drupal, the good parts
- 1. Next.js with Drupal, thegood parts Sebastian Ferrari sebas@taller.net.br @sebas5384
- 2. ● From Uruguayliving in Brazil ● CTO & Co-Founder of Taller ● +15 years as developer ● ~10 years as a Drupal dev ● Co-founder of React Conf Brazil ● DevOps chairman of the Drupal Conference LATAM (2015)
- 3. A brief history decouplingDrupal sites ��
- 4. ● Still inproduction ● Not fully decoupled ● Drupal 8.x ● Simple controllers serving JSON payloads ● SPA using React with Redux (and Redux Boot) ● Integration with payment gateway Natura’s paying Web App (2016)
- 5. ● Still inproduction ● Not fully decoupled ● Drupal 8.x and Apache Solr ● Controllers serving JSON+LD schema payloads ● SPA using React with Redux (and Redux Boot) ● Immutable.js + Reselect + Normalizr Natura’s public and private FAQ (2016)
- 6. ● ~1 millionof contents ● ~900 simultaneous users ● Drupal 8.x and Apache Solr ● GraphQL module (before RC) with Apollo Client ● Next.js 4.x with custom server routing ● Edit-in-line everything!! Layout, Blocks and Contents ● Paywall using AWS Lambda’s integrated with Drupal NSC Total publishing site (2018)
- 7. ● Next.js onKubernetes ● Drupal 8.x and Apache Solr ● GraphQL module with Apollo Client ● GraphQL gateway using stitching and delegation ● Drupal integration with the ATG Business Control Center for demographic segmentation ● Endured a black friday!! o/ Natura’s E-Commerce (2018)
- 8.
- 9.
- 11. React Framework which takesout the pain of building Universal Apps ��
- 12.
- 13.
- 14.
- 15. Once upon atime at the Brazil JS Conf (2014)
- 16. The 7 Principlesof Rich Web Applications by Guillermo Rauch
- 17. 1. Server renderedpages are not optional 2. Act immediately on user input 3. React to data changes 4. Control the data exchange with the server 5. Don’t break history, enhance it 6. Push code updates 7. Predict behavior
- 18. Next.js was bornfrom those 7 principles
- 19. SSR as firstcitizen
- 20. Collection of best practices tobuild Universal Apps
- 21.
- 22.
- 23. Compose Webpack configurations withplugins ● next-plugins ● next-compose-plugins
- 26.
- 27. Customize everything ● ./pages/_app.js RootApp component ● ./pages/_document.js Document's markup like <html> ● ./pages/_error.js Customize universal error pages
- 28. ● (SUPER) Dynamicrouting ● It’s just an ordinary express server, so you can proxy requests, add middlewares ● Your project has specific needs for a different web server Customize the web server
- 30.
- 31. ● Common libs ●Webpack runtime ● Each page earns its own chunk ● Use import() out of the box ● Cache busting ● Defer parsing JS files when rendering the DOM Code splitting (chunks)
- 36.
- 37.
- 38. ● Start witha single file: ./pages/index.js ● Fast hot-reload ● Build bundles on-demand ● Awesome error stack traces ● Zero-config Typescript support Dev Workflow
- 39.
- 40. ● All thedocs fit in a README file ● Examples oriented (203 in the official repo) ● Guided learning path Documentation
- 41.
- 42. ● File systemas dynamic routes (demo) ● Full custom routing by using custom server ● API Routes (demo) ● Code Splitting ● Universal routing with next-routes module Routing System
- 43.
- 44. ● Function asa Page ● Serverless mode: ○ Completely standalone files which don’t require any dependencies ○ Reduce cold start ● Hybrid rendering, pre-rendering or on-demand Serverless
- 45.
- 46. ● You useor want to use React.js to build universal applications ● High volume of content ● High frequency of updates ● Breaking news, publish in less than 5 minutes ● Server Side Rendering (SSR) ○ Need SEO ○ Performance: First Meaningful Paint (for RUM) When to use Next.js?
- 47. Next on Drupal theboilerplate
- 48.
- 50.
- 51. ● Try toresolve on GraphQL route() query first ● Deduce which page/component needs to load for the entity of that route ● Use dynamic importing for better code splitting ● Universal 404 errors, both server and browser ● Redirects (already in production) Drupal route resolver
- 52.
- 53. ● Blocks ○ Resolverby region to mount a layout ○ Each block expose a GraphQL fragment ○ Blocks can execute its own query ○ Entity reference field to blocks ● Metatags module (GraphQL) ○ Get’s Metatags from contextual entity ○ Component/Container ready to use in pages Contextual data by route (DEMO)
- 54.
- 55. ● Supports manylevels of depth ● Can be used multiple times in the same page ● A Container <MenuContainer /> ready to use Menu
- 58. Internal links for SPAnavigation
- 59. ● Keep theuser navigation through SPA mode ● Use <Link as=”/drupal” href=”/my-article”> to resolve an url on Drupal, both server and client ● <HtmlText> component will patch every <a> which has an internal (relative) href Internal Links
- 61.
- 62. Next on Drupal theboilerplate We need help! 🥰
- 63. ● Suspense toget rid of static hoisting of getInitalProps() ● WebAssembly (WASM) for cross teams ○ PHP in the browser and Nodejs? ● Better serverless support The future is bright
- 64.
- 65. ● Revalidate cacheon the background ● Soft purging!! please!! ● Cache-tags with soft purging ● Use a CDN (or/and Varnish) which better fits your needs ● Use Apollo’s “cache-and-network” fetch policy to maintain your user navigation fresh ● Perfect for serverless rendering on-demand Serve Stale first
- 66.