BlogCategoryTag

Header

Footer

PreFooter

ProseBlock

Blog

SocialLinks

Prose

AnnouncementContextProvider

UnnamedGlobalGroupOfVariants2

Screen

Segment

Experiment

Experiment2

scale.com (Production)

plasmic-nav

plasmic-embed-css

plasmic-basic-components

plasmic-tabs

plasmic-cms

react-chartjs-2

react-slick

react-quill

Guido Maliandi

Product

One of the most obvious signs that a site is made with <a href="https://github.com/zeit/next.js/" rel="noopener noreferrer" target="_blank">Next.JS</a> is that you load the page, you click a link to another section and it loads instantly. That’s because when a page is loaded, <a href="https://github.com/zeit/next.js/" rel="noopener noreferrer" target="_blank">Next.JS</a> will download in the background all the other pages linked with tags. This works great for static pages, but as soon as you have to fetch some data in the getInitialProps, loading that page will take time even if it the page code is prefetched. And what is worse — unless you explicitly add a loading indicator, it will usually take time with no indication in the UI! Prefetching and caching data is not trivial — for example, it could be wrong to serve a slightly outdated version of certain information. Also, different data could have different caching rules. Here at Scale we decided to implement a lightweight caching and data prefetching strategy, which allows having this instant navigation experience without compromising data freshness. <h2>Caching in getInitialProps</h2> On certain parts of our site, we know it is OK to show data that is a few minutes old. For those cases, we implemented a simple caching strategy that stores data with a 5 minute TTL. The implementation uses an abstraction around the fetch api that we called <code>cached-json-fetch</code>: <pre class="ql-syntax" spellcheck="false">import lscache from 'lscache';
import fetch from 'isomorphic-fetch';
const TTL_MINUTES = 5;
export default async function(url, options) {
// We don't cache anything when server-side rendering.
// That way if users refresh the page they always get fresh data.
if (typeof window === 'undefined') {
return fetch(url, options).then(response =&gt; response.json());
}
let cachedResponse = lscache.get(url);
// If there is no cached response,
// do the actual call and store the response
if (cachedResponse === null) {
cachedResponse = await fetch(url, options)
.then(response =&gt; response.json());
lscache.set(url, cachedResponse, TTL_MINUTES);
}
return cachedResponse;
}
export function overrideCache(key, val) {
lscache.set(key, val, TTL_MINUTES);
}
</pre>We then use this in the <code>getInitialProps</code> of our pages: <pre class="ql-syntax" spellcheck="false">import React from 'react';
import cachedFetch, { overrideCache } from 'lib/cached-json-fetch';
const SOME_DATA_URL = '/some_data';
export default class SomePage extends React.Component {
static async getInitialProps(ctx) {
const someData = await cachedFetch(SOME_DATA_URL);
const isServerRendered = !!ctx.req;
return { someData, isServerRendered };
}
componentDidMount() {
// When the page is server-rendered,
// we override the value in the client cache
if (this.props.isServerRendered) {
overrideCache(SOME_DATA_URL, this.props.someData);
}
}
}
</pre>Now, when we client-navigate to this page, it will check the cache first before fetching the data from the server. Alternatively, on a full page reload, it will always fetch the latest data from the server and reset the TTL. <h2>Prefetching data</h2> With a caching layer like this in place, it is extremely straightforward to add prefetching. In the example above, all we need to do is call <code>getInitialProps</code> so the cache is populated with all the necessary data to load the page. Now, if this page is client-navigated to before the TTL expires, it will load instantly just like a static page! To achieve this, we can create a simple abstraction over Link, which not only downloads the page structure in the background but also calls its <code>getInitialProps</code> to populate the cache: <pre class="ql-syntax" spellcheck="false">import React from 'react';
import Link from 'next/link';
import { resolve, parse } from 'url';
import Router from 'next/router';
export default class DataPrefetchLink extends Link {
async prefetch() {
if (typeof window === 'undefined') {
return;
}
const { pathname } = window.location;
const href = resolve(pathname, this.props.href);
const { query } = parse(this.props.href, true);
const Component = await Router.prefetch(href);
if (this.props.withData &amp;&amp; Component) {
const ctx = {pathname: href, query, isVirtualCall: true};
await Component.getInitialProps(ctx);
}
}
}
</pre>Using this in our pages is as simple as: <code>&lt;Link prefetch withData href="…"&gt;</code>. In case you have some calls in your page’s <code>getInitialProps</code> that do not use a cache, you can use the <code>isVirtualCall</code> flag in the context to avoid making them when the method is called for caching purposes only. For example: <pre class="ql-syntax" spellcheck="false">import React from 'react';
import cachedFetch, { overrideCache } from 'lib/cached-json-fetch';
import fetch from 'isomorphic-fetch';
const SOME_DATA_URL = '/some_data';
export default class SomePage extends React.Component {
static async getInitialProps(ctx) {
const someData = await cachedFetch(SOME_DATA_URL);
const isServerRendered = !!ctx.req;
const isVirtualCall = ctx.isVirtualCall;
// No need to call this when prefetching the page,
// since this data won’t be cached
let someNonCachedData;
if (!isVirtualCall) {
someNonCachedData = await fetch('/some_non_cached_data')
.then(response =&gt; response.json());
}
return { someData, someNonCachedData, isServerRendered };
}
componentDidMount() {
// When the page is server-rendered,
// we override the value in the client cache
if (this.props.isServerRendered) {
overrideCache(SOME_DATA_URL, this.props.someData);
}
}
}
</pre>The key element that makes this possible is that the programmatic prefetch API through <code>Router.prefetch</code> returns the page’s constructor, so we can call the <code>getInitialProps</code> directly on that object! You can find this extended Link component in npm as <a href="https://www.npmjs.com/package/data-prefetch-link" rel="noopener noreferrer" target="_blank">data-prefetch-link</a>. In conclusion, we learned that with some fine-tuning we can make our dynamic next.js pages load as fast as static pages, without sacrificing the freshness of the data or the flexibility to choose which data we want to cache. We hope this helps you make your web platforms faster!

Increase the Performance of Dynamic Next.JS Websites - Scale

Increasing the Performance of Dynamic Next.JS Websites

open-dataset-nucleus

slugs must be all lowercase. ie: ‘my-slug’

events-banner

This entry represents both interview quote highlight and interview chat highlight because of Builder limitations. Choose the fields that matches either of them.

interview-highlight

If it's selected, the author and quote fields will be taken, otherwise the chat fields. The default is for chat.

resources-download-model

transform-session

CTA to open the session. Leave blank if you don't want a cta for that session

Link for the CTA. Usually the link to the exchange session

blog-filter-type

event-transform-x-ticket

solution

homepage-quotes

logos

homepage-content

builder-debug

transfrom-x-in-person

event-model

Toggle if the event is featured. Featured events will be moved to the top of the list

guides-cta

summit-2023-partners

sales

z[deprecated] page

quotes

z[deprecated] compare

product

blog-category-model

announcement-banner

accelerate

Vercel Powered and Edge Computed OG Image. Preferred over og img file upload. If this field is non empty, it will take precedent over the uploaded file

summit-2023-speakers

homepage-resources

customers

Display order on the page /customers. Higher values show first

page-cross-product-webinar

interview

event-transform

Event model for new marketing events page

event-2-0

homepage-event

custom-fonts

transform-x-speaker

Be careful to not add any trailing white spaces to the slug. Slugs must be all lowercase. ie: ‘my-slug’

Order of the featured speakers displayed on the home page for transformX

z[deprecated] document-ai

summit-2023-agenda

event-converge

hosts

author

transform-x

Page: /In-Person. Section: Hero. Text: Title Text

Page: /In-Person. Section: Slider Card. Text: Title Text

Page: /In-Person. Section: Slider Card. Text: Card Body

Page: /In-Person. Section: Hero. Text: Tagline

open-dataset

z[deprecated] customers

URL redirections for Website. Disclaimer: takes 5~ min for each added or edited.

url-redirects

Use relative path. use `/blog/foo` not `https://scale.com/blog/foo`

legal

event

Optional second image intended to show on the grid view, should be a more squared image closer to 1:1 aspect ratio than the one used in the Cover field.

guides

z[deprecated] guides-old

z[deprecated] guides-lp

partners

blog-model

Option to list or not list this post in the Blog index. Enabled = not list in the index, Disabled = list in the index

Products

Government

Solutions

Resources

Customers

Pricing →

Increasing the Performance of Dynamic Next.JS Websites

The future of your industry starts here.