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.
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)
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)
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
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
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)
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
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
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?
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)
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
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