Next.js with drupal, the good parts
1 like3,040 views
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.
Next.js with drupal, the good parts
- 1. Next.js with Drupal, the good parts Sebastian Ferrari [email protected] @sebas5384
- 2. ● From Uruguay living 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 decoupling Drupal sites ��
- 4. ● Still in production ● 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 in production ● 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 million of 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 on Kubernetes ● 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)
- 9. What’s ?
- 11. React Framework which takes out the pain of building Universal Apps ��
- 14. Why ?
- 15. Once upon a time at the Brazil JS Conf (2014)
- 16. The 7 Principles of Rich Web Applications by Guillermo Rauch
- 17. 1. Server rendered pages 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 born from those 7 principles
- 19. SSR as first citizen
- 20. Collection of best practices to build Universal Apps
- 21. Who’s using it?
- 22. Flexibility
- 23. Compose Webpack configurations with plugins ● next-plugins ● next-compose-plugins
- 27. Customize everything ● ./pages/_app.js Root App component ● ./pages/_document.js Document's markup like <html> ● ./pages/_error.js Customize universal error pages
- 28. ● (SUPER) Dynamic routing ● 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. Performance
- 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. Prefetching
- 37. Dev Workflow
- 38. ● Start with a single file: ./pages/index.js ● Fast hot-reload ● Build bundles on-demand ● Awesome error stack traces ● Zero-config Typescript support Dev Workflow
- 39. Documentation ��
- 40. ● All the docs fit in a README file ● Examples oriented (203 in the official repo) ● Guided learning path Documentation
- 41. Routing system
- 42. ● File system as dynamic routes (demo) ● Full custom routing by using custom server ● API Routes (demo) ● Code Splitting ● Universal routing with next-routes module Routing System
- 44. ● Function as a Page ● Serverless mode: ○ Completely standalone files which don’t require any dependencies ○ Reduce cold start ● Hybrid rendering, pre-rendering or on-demand Serverless
- 45. When to use ?
- 46. ● You use or 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 the boilerplate
- 51. ● Try to resolve 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
- 53. ● Blocks ○ Resolver by 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. Drupal Menus !
- 55. ● Supports many levels of depth ● Can be used multiple times in the same page ● A Container <MenuContainer /> ready to use Menu
- 58. Internal links for SPA navigation
- 59. ● Keep the user 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
- 62. Next on Drupal the boilerplate We need help! 🥰
- 63. ● Suspense to get rid of static hoisting of getInitalProps() ● WebAssembly (WASM) for cross teams ○ PHP in the browser and Nodejs? ● Better serverless support The future is bright
- 65. ● Revalidate cache on 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. Credits: KeyCDN