Truly static pages without react app #32217

EugeneKostrikov · 2018-08-29T13:16:09Z

EugeneKostrikov
Aug 29, 2018

Feature request

Is your feature request related to a problem? Please describe.

We want some static pages to be as lightweight as possible and we're fine with full page reloads navigating out of them if we can chop off extra 200Kb.

Describe the solution you'd like

Add an option to path map in next.config.js to indicate this specific page doesn't need to include react app and can operate as plain HTML page.
React app is only removed in case the flag is set to true explicitly.

Looks like it should be enough to just make files content empty there if option is set. https://github.com/zeit/next.js/blob/canary/server/render.js#L100

For the simple example from tutorial setting up

// next.config.js
module.exports = {
  exportPathMap: function(defaultPathMap) {
    return {
      '/': { page: '/', withoutReact: true },
      '/about': { page: '/about' }
    }
  }
}

As a result /out would be populated with

<!--/out/index/index.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charSet="utf-8" class="next-head"/>
  </head>
<body>
   <a href="/about">About</a>
</body>
</html>


<!--/out/about/index.html-->
<!DOCTYPE html>
<html>
  <head>
    <meta charSet="utf-8" class="next-head"/>
    <link rel="preload" href="/_next/9d298d49-6fb5-4c6f-a992-31fdb0d3e01a/page/about.js" as="script"/>
    <!--other scripts-->
  </head>
<body>
   <!--page content -->
   <script>
     NEXT_DATA = {"props": "etc.."}
   </script>
  <script id="__NEXT_PAGE__/about" src="..."></script>
</body>
</html>

This way index page is going to be very lightweight, with a tradeoff of full page reload navigating to /about. While /about would load the app, so navigation back to / would be handled on the client-side.

Describe alternatives you've considered

Static site generators :) But we need way more than just static pages and next.js fits us best except for this tiny quirk.

Additional context

Happy to implement that, just wanted to make sure this is not something going against the roadmap for next.js. Or if it's something already available, but hidden. I'm new to the library, only playing around for the second day.

danielr18 · 2018-08-30T22:35:07Z

danielr18
Aug 30, 2018

I think you can do that with a custom Document. Something like this:

// pages/_document.js
import Document, {  Main, NextScript } from 'next/document'

const pagesWithoutReact = ['/'];

export default class MyDocument extends Document {
  render() {
    const { __NEXT_DATA__ } = this.props;
    return (
      <html>
        <body>
          <Main />
          {!pagesWithoutReact.includes(__NEXT_DATA__.pathname) ? <NextScript /> : null}
        </body>
      </html>
    )
  }
}

0 replies

timneutkens · 2018-08-31T08:49:43Z

timneutkens
Aug 31, 2018
Maintainer

@danielr18 that's not a reliable way to remove the script tags as they're still preloaded.

0 replies

EugeneKostrikov · 2018-08-31T09:13:53Z

EugeneKostrikov
Aug 31, 2018
Author

Technically looks like that would do the job. Discovered staticMarkup option in export renderOpts. It instructs NextScript not to include the scripts. Effectively same thing as custom Document above, but without one and can be managed on exportPathMap level. It was not 100% implemented but did some tweaks on the fork and got it working. It was not removing all scripts and preload links.

Now facing another issue not directly related to next.js itself. The static page i'm trying to render is a snapshot of quite complex page currently rendered by Wordpress. If i navigate to this page directly (with full page reload) everything is smooth. But navigation using Link breaks the scripts already present on the page (there's angular, jquery and whole galaxy of other trash). Looks like something to do with scripts load order when they're added to the body dynamically. Continue with this - would rather have some neat solution in place before creating PR.

0 replies

IanEdington · 2019-01-26T04:48:09Z

IanEdington
Jan 26, 2019

This would be a great addition to this ecosystem. We are looking to generate a number of static landing pages as lightweight entry points into our SPA. This is the perfect solution.

0 replies

cesarvarela · 2019-01-29T16:37:40Z

cesarvarela
Jan 29, 2019

Whats the status of this? I'm needing something like this too.

0 replies

tnunes · 2019-02-15T15:18:26Z

tnunes
Feb 15, 2019

Curious about the state of this, as I'm also looking to implement something similar for statically exported error pages.

0 replies

Shankar1598 · 2019-03-01T14:29:56Z

Shankar1598
Mar 1, 2019

Is there any other tool available to do this now? I too need something similar.

0 replies

mkaradeniz · 2019-03-01T15:04:56Z

mkaradeniz
Mar 1, 2019

I did it as danielr18 described.

Create a custom _document and omit <Head /> and <NextScript />. I did switch to react-helmet to replace the other functionality of <Head />. See the with-react-helmet example to get that working. This worked fine for my use case (server-rendered React without any client-side javascript).

0 replies

bancek · 2019-04-20T20:53:51Z

bancek
Apr 20, 2019

I also did something similar to @danielr18. The problem with his example is that JavaScript files are still preloaded even though they are not needed.

I extended Head component and removed all link preload tags.

// pages/_document.js
import Document, { Main, Head } from 'next/document';

class CustomHead extends Head {
  render() {
    const res = super.render();

    function transform(node) {
      // remove all link preloads
      if (node && node.type === 'link' && node.props && node.props.rel === 'preload') {
        return null;
      }
      if (node && node.props && node.props.children) {
        return {
          ...node,
          props: {
            ...node.props,
            children: node.props.children.map(transform),
          },
        };
      }
      if (Array.isArray(node)) {
        return node.map(transform);
      }

      return node;
    }

    return transform(res);
  }
}

class StaticDocument extends Document {
  render() {
    return (
      <html>
        <CustomHead />
        <body>
          <Main />
        </body>
      </html>
    )
  }
}

export default process.env.NODE_ENV === 'production' ? StaticDocument : Document;

This generates a minimal build without any JavaScript when running next build && next export and still use hot reloading in development.

0 replies

TriPSs · 2019-06-17T15:28:55Z

TriPSs
Jun 17, 2019

@bancek had a small issue with your solution, had to change:

if (node && node.props && node.props.children) {
return {
    ...node,
    props: {
      ...node.props,
      children: node.props.children.map(transform)
    },
  }
}

To:

if (node && node.props && node.props.children) {
return {
    ...node,
    props: {
      ...node.props,
      children: Array.isArray(node.props.children)
	    ? node.props.children.map(transform)
	    : transform(node.props.children),
    },
  }
}

0 replies

askirmas · 2019-06-21T08:26:03Z

askirmas
Jun 21, 2019

Super applying is Email templates embed in ecosystem, not as a side feature

0 replies

iamstarkov · 2019-06-21T10:57:21Z

iamstarkov
Jun 21, 2019

@askirmas can you elaborate?

0 replies

askirmas · 2019-06-25T14:29:01Z

askirmas
Jun 25, 2019

@iamstarkov In autumn

0 replies

iamstarkov · 2019-06-26T10:21:06Z

iamstarkov
Jun 26, 2019

@askirmas i meant that i dont understand you

0 replies

askirmas · 2019-06-29T14:01:05Z

askirmas
Jun 29, 2019

Example

layouts/website.js

export default ({children}) => <><Header/>{children}<Footer/></>

layouts/email.js (or as separate project with pages reuse)

export default ({children}) => <>
  <EmailHeader/>
  <div>Dear {full_name}</div>
  {children}
  <EmailFooter/>
</>

components/?page/newSuperProposition.js

export default () =><b>New Super Proposition!</b>

With exportPathMap and etc will be exported as

out/website/newSuperProposition.html
out/email/newSuperProposition.html

There are many limitations to send newSuperProposition.replace('{full_name}', 'Andrii Kirmas') as email without loosing styles or something else. And first step is not have scripts

0 replies

amannn · 2020-08-18T16:21:34Z

amannn
Aug 18, 2020

If somebody is interested, I've built a plugin that allows to add vanilla JS entry points for pages that have unstable_runtimeJS: false: https://github.com/amannn/next-client-script. It's useful if you still need a bit of interactivity but you don't want React on the client side for performance reasons.

Note that this plugin modifies webpack configuration of Next.js. Similar as with other Next.js plugins that do this, it's possible that this plugin will break when there are updates to Next.js. I'm keeping the plugin updated so that it continues to work with new versions of Next.js. I've just updated the plugin to work with Next.js 9.5 🙂 .

0 replies

artcg · 2020-08-25T14:58:48Z

artcg
Aug 25, 2020

A neater way of doing this (pruning out the script tags via a custom _document.js) is possibly not putting them in the first place:

Have some logic in a custom node server.js which renders your react components for pages you want to be truly static via ReactDOMServer.renderToStaticMarkup (of course, also including any HTML tags which are needed)

and serving this for paths as necessary

That also has the advantage of leaving your site completely untouched for normal paths which need javascript interactivity

I am doing this for a side project I am working on and it's working nicely

0 replies

adammockor · 2020-08-26T06:59:35Z

adammockor
Aug 26, 2020

@artcg do you example of that server.js logic?

0 replies

artcg · 2020-08-26T09:06:20Z

artcg
Aug 26, 2020

Sure, I won't include all the boilerplate etc that you would include but the pattern is simply

// server.js
const {createServer} = require('http');
const {parse} = require('url');
const next = require('next');

const app = next({dev: process.env.NODE_ENV !== 'production'});

const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {

    const parsedUrl = parse(req.url, true);

    if (parsedUrl.pathname === '/static_example') {
      yourOwnCustomHandler(req, res);
      // render your React Component to static markup here,
      // add HTTP headers, and write to res, then call res.end()

    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(8080, err => {
    if (err) throw err;
  });
});

The result is effectively your entire site is running with NextJS, except for whichever route you define which you can handle yourself

It's just node so it is fully controllable :)

0 replies

timneutkens · 2020-08-26T10:06:58Z

timneutkens
Aug 26, 2020
Maintainer

Sure, I won't include all the boilerplate etc that you would include but the pattern is simply

// server.js
const {createServer} = require('http');
const {parse} = require('url');
const next = require('next');

const app = next({dev: process.env.NODE_ENV !== 'production'});

const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer((req, res) => {

    const parsedUrl = parse(req.url, true);

    if (parsedUrl.pathname === '/static_example') {
      yourOwnCustomHandler(req, res);
      // render your React Component to static markup here,
      // add HTTP headers, and write to res, then call res.end()

    } else {
      handle(req, res, parsedUrl);
    }
  }).listen(8080, err => {
    if (err) throw err;
  });
});

The result is effectively your entire site is running with NextJS, except for whichever route you define which you can handle yourself

It's just node so it is fully controllable :)

This solutions makes you opt out of all Next.js features because you opt-out of using Next.js completely. Would recommend just using #11949.

0 replies

artcg · 2020-08-26T10:38:40Z

artcg
Aug 26, 2020

I tried that but it didn't work, and there is no documentation for it anywhere, for my case it was easier to opt out of next for that file

0 replies

naorye · 2020-10-09T21:39:42Z

naorye
Oct 9, 2020

Isn't the following solve this issue?

export const config = {
  unstable_runtimeJS: false
}

export default () => <h1>My page</h1>

(taken from #11949)

0 replies

timneutkens · 2020-10-10T10:14:42Z

timneutkens
Oct 10, 2020
Maintainer

Isn't the following solve this issue?
export const config = {
  unstable_runtimeJS: false
}

export default () => <h1>My page</h1>
(taken from #11949)

Only partially. See #11949 (comment)

0 replies

lambrospetrou · 2021-03-11T22:23:39Z

lambrospetrou
Mar 11, 2021

Having truly static pages is something I want as well.

I ended up doing it post-export since I already had some hooks there, but having it natively would be nicer.

I am looking forward to https://twitter.com/shaneOsbourne/status/1360708099552780293 being released :)

0 replies

hcharley · 2021-03-24T13:39:15Z

hcharley
Mar 24, 2021

My usecase is similar to those that have mentioned "email templates."

Email templates really shouldn't have any JS in them at all, so having this ability would really open doors for my team.

Right now I am planning on just injecting the template into an iframe to support this usecase. Here's what I'm doing:

import { EmailTemplateContextUiProvider } from '@ui/contexts/email-template-context';
import React, { FC, ReactChild, ReactChildren } from 'react';
import Frame from 'react-frame-component';

export interface EmailTemplateBaseProps {
  shouldRenderIframeWrapper?: boolean;
  shouldRenderHtmlAndBody?: boolean;
  shouldRenderNextPage?: boolean;
  title?: string;
  head?: ReactChildren | ReactChild;
}

export const EmailTemplateBase: FC<EmailTemplateBaseProps> = ({
  children,
  shouldRenderNextPage = true,
  shouldRenderIframeWrapper = shouldRenderNextPage,
  shouldRenderHtmlAndBody = shouldRenderIframeWrapper,
  title = 'My Email Template',
}) => {
  let newChildren = (
    <EmailTemplateContextUiProvider>
      {children}
    </EmailTemplateContextUiProvider>
  );

  // Optionally render template inside a full HTML document, otherwise
  // render the template's body only
  if (shouldRenderHtmlAndBody) {
    newChildren = (
      <html>
        <head>
          <title>{title}</title>
        </head>
        <body>{children}</body>
      </html>
    );
  }

  // Optionally render template inside an <iframe /> to avoid any JS from Next.
  // When NextJS supports fully static pages, we can rethink this: https://github.com/vercel/next.js/issues/5054#issuecomment-805829676
  if (shouldRenderIframeWrapper) {
    newChildren = (
      <Frame
        style={{
          width: '100%',
          height: '100%',
          border: 0,
          flexGrow: 1,
          padding: 0,
          margin: 0,
        }}
      >
        {children}
      </Frame>
    );
  }
  return newChildren;
};

0 replies

jerrygreen · 2021-05-01T21:47:12Z

jerrygreen
May 1, 2021

Just figured I need some embeddable component for an iframe for one page, pretty much like Twitter embeddable card or something. I would like to have some js in there though, so react hooks etc, - I want that, but I wanna disable all the nextjs features like any kind of preloading, routing, etc. Is it possible to disable all that just for one page? Or should I create-next-app inside another nextjs app to isolate this little page and it's the only way currently?

0 replies

aralroca · 2021-06-01T15:57:22Z

aralroca
Jun 1, 2021

In my case, I'm still using the workaround that @bancek proposed above because the unstable_runtimeJS flag doesn't solve my problem. I want to disable all the JavaScript based on the user-agent (for bots, as dynamic rendering), not based on-page.

The problem I recently encountered is when using the new Image component, that the loading="lazy" is managed with JavaScript and it does not load the images. As a solution, I made another workaround that I tell here... I hope a better solution to this will be found.

0 replies

alex-drocks · 2021-09-18T12:02:29Z

alex-drocks
Sep 18, 2021

I think this is worth the effort. I was tempted to use astro just because of this. But i prefer Next by far so im kinda stuck with either full React or only basic self made html css build tools with webpack. I even tried Hugo but it was way overcomplicated.

0 replies

lambrospetrou · 2021-10-28T09:53:57Z

lambrospetrou
Oct 28, 2021

Now with Next.js 12 and the alpha integration with Server Components, will this issue have a proper solution?

unstable_runtimeJS gets somewhat there but if you want to add a small dynamic widget then you either have to go full runtime again, or add an extra JS bundle that you control outside Next js and will render those widgets. It works but it's a hassle.

I was waiting for the React Server Components (RSC) to land hoping that they would trivially solve this issue since they could run once during compile time, and then the runtime could just include the client component along with the static version of the server components embedded (if needed at all).

However, the Server Components alpha documentation, https://nextjs.org/docs/advanced-features/react-18#unsupported-nextjs-apis, mentions:

Server Components are executed per requests and aren't stateful.

No support for getInitialProps, getStaticProps and getStaticPaths

So this feels that they are only usable when you actually have a server running, and not integrated with next export.

Is this something due to being alpha integration yet, or is this how it's going to be in the final state as well?

Thanks for all the amazing work so far!

0 replies

brianjenkins94 · 2022-05-30T13:29:30Z

brianjenkins94
May 30, 2022

Slightly updated version of #32217 (comment) with the fix from #32217 (comment) and some optional chaining:

// pages/_document.ts
import { Head, Html, Main, NextScript } from "next/document";

import config from "../next.config.mjs";

// FROM: https://github.com/vercel/next.js/discussions/32217#discussioncomment-1766291
function transform(node) {
	if (node?.type === "link" && node?.props.rel === "preload") {
		return null;
	}

	if (node?.props?.children) {
		return {
			...node,
			"props": {
				...node.props,
				"children": Array.isArray(node.props.children) ? node.props.children.map(transform) : transform(node.props.children)
			}
		};
	}

	if (Array.isArray(node)) {
		return node.map(transform);
	}

	return node;
}

class CustomHead extends Head {
	public override render() {
		return transform(super.render());
	}
}

export default function Document() {
	return (
		<Html lang="en">
			<CustomHead>
				<meta name="description" content="" />
				<base href={config.basePath + "/"} />
				<link rel="preconnect" href="https://fonts.googleapis.com" />
				<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="true" />
				<link href="css/fontawesome-5.15.4.min.css" rel="stylesheet" />
				<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap" rel="stylesheet" />
			</CustomHead>
			<body>
				<Main />
				<NextScript />
			</body>
		</Html>
	);
}

0 replies

Truly static pages without react app #32217

Feature request

Is your feature request related to a problem? Please describe.

Describe the solution you'd like

Describe alternatives you've considered

Additional context

Replies: 46 comments

timneutkens Aug 31, 2018 Maintainer

EugeneKostrikov Aug 31, 2018 Author

timneutkens Aug 26, 2020 Maintainer

timneutkens Oct 10, 2020 Maintainer

timneutkens
Aug 31, 2018
Maintainer

EugeneKostrikov
Aug 31, 2018
Author

timneutkens
Aug 26, 2020
Maintainer

timneutkens
Oct 10, 2020
Maintainer