Skip to main content

NextJS

Recommendations for Abyss in Next 13+​

If you are OK with only client-side rendering, put your pages under /app, and add the "use client"; to those pages. This disables SSR and RSC streaming for those pages. *

If you require SSR for some or all pages, put those pages under /pages, where you can use the old SSR model.

Abyss SSR support in NextJS​

NextJS Version/pages/app
12✅N/A
13,14,15✅Client-only

* Note: In some cases, the presence of the "use client" directive does NOT prevent the server from generating the HTML markup of the component! However, since the NextJS documentation contradicts this, your mileage may vary.

Background​

In NextJS versions 12 and lower, routes are defined under the /pages directory, and have options to render on the server (SSR), or on the client. SSR is one way to speed up a user's experience, by providing them HTML before loading and running JavaScript in the browser.

In NextJS 13, an alternate way of speeding up requests was designed - React Server Components (RSC) - which allows the server to send its results bit-by-bit. This allows the faster parts of rendering server HTML to be seen by the user sooner, as parts of the page are streamed.

This new behavior is the default for pages under /app. However, the streaming aspect of RSC limits what kind of functionality can be rendered and streamed. In particular, Context and Provider, can not be used, as shown in the error:

Error: createContext only works in Client Components.

This happens because Abyss theming and other features are implemented using React Context - a practice which is recommended by the React team, and typical of 3rd party components.

SSR lifecycle​

The lifecycle of a typical /pages SSR request is:

  • Page renders on the server, sending HTML to the browser
  • The browser downloads the JS chunks for the page
  • The browser executes the chunks, re-rendering the page in the 'hydration' process
  • When hydration is complete, the static markup is now under control of React, and the page will behave as a Single-Page App, or SPA.

References​

Sample applications​

A sample NextJS 14 app, with usage of /pages and /app, is located in the Abyss repo at the path:

/products/abyss-nextjs-14

A sample NextJS 15 app, with usage of /pages and /app, is located in the Abyss repo at the path:

/products/abyss-nextjs-15

Note: The NextJS 15 example uses React v19 and requires Abyss version 1.70.0 or higher.

Table of Contents