Next.js with drupal, the good parts
•
1 gefällt mir•3,011 views
Next.js is one of the top choices when you need performant and robust React.js server side rendering with smart code splitting on your front end. Things like smart code-splitting, routing, lazy loading, isomorphic state between server and client side (browser) or Webpack optimised configurations can be a hassle, but Next.js framework make your developing process go forward. After almost two years building from an e-commerce to a publishing site using Next.js with Drupal + GraphQL on production, we learned valuable lessons which motivated us to build the next-on-drupal boilerplate, a collection of examples and tools in order to integrate Drupal best features with Next.js. I'll share with you our most valuable lessons, showing to you how we integrate: Drupal’s dynamic routing, translations, layouts with contextual blocks, metatags, cache-tags and more.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Next.js with drupal, the good parts
Ähnlich wie Next.js with drupal, the good parts (20)
Mehr von Taller Negócio Digitais
Mehr von Taller Negócio Digitais (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
Next.js with drupal, the good parts
- 1. Next.js with Drupal, the good parts Sebastian Ferrari sebas@taller.net.br @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