O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Next.js with drupal, the good parts

1.984 visualizações

Publicada em

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.

Publicada em: Software
  • Entre para ver os comentários

  • Seja a primeira pessoa a gostar disto

Next.js with drupal, the good parts

  1. 1. Next.js with Drupal, the good parts Sebastian Ferrari sebas@taller.net.br @sebas5384
  2. 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. 3. A brief history decoupling Drupal sites ��
  4. 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. 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. 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. 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)
  8. 8. What’s Drupal ?
  9. 9. What’s ?
  10. 10. React Framework which takes out the pain of building Universal Apps ��
  11. 11. JS Browser rendering Server rendering
  12. 12. ZERO CONFIGURATION !!!! ����
  13. 13. Why ?
  14. 14. Once upon a time at the Brazil JS Conf (2014)
  15. 15. The 7 Principles of Rich Web Applications by Guillermo Rauch
  16. 16. 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
  17. 17. Next.js was born from those 7 principles
  18. 18. SSR as first citizen
  19. 19. Collection of best practices to build Universal Apps
  20. 20. Who’s using it?
  21. 21. Flexibility
  22. 22. Compose Webpack configurations with plugins ● next-plugins ● next-compose-plugins
  23. 23. Customize Babel configurations
  24. 24. Customize everything ● ./pages/_app.js Root App component ● ./pages/_document.js Document's markup like <html> ● ./pages/_error.js Customize universal error pages
  25. 25. ● (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
  26. 26. Performance
  27. 27. ● 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)
  28. 28. Prefetching
  29. 29. Dev Workflow
  30. 30. ● 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
  31. 31. Documentation ��
  32. 32. ● All the docs fit in a README file ● Examples oriented (203 in the official repo) ● Guided learning path Documentation
  33. 33. Routing system
  34. 34. ● 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
  35. 35. Serverless ready!
  36. 36. ● 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
  37. 37. When to use ?
  38. 38. ● 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?
  39. 39. Next on Drupal the boilerplate
  40. 40. GraphQL module for Drupal
  41. 41. Universal Drupal route resolver
  42. 42. ● 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
  43. 43. Contextual Data by route
  44. 44. ● 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)
  45. 45. Drupal Menus !
  46. 46. ● Supports many levels of depth ● Can be used multiple times in the same page ● A Container <MenuContainer /> ready to use Menu
  47. 47. Internal links for SPA navigation
  48. 48. ● 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
  49. 49. Translation 🚧 WIP
  50. 50. Next on Drupal the boilerplate We need help! 🥰
  51. 51. ● 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
  52. 52. Stale content first approach
  53. 53. ● 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
  54. 54. Credits: KeyCDN

×