Next.js 13 all pages are server-side render bug

Question

All pages in next 13 (experimental app.dir) are server side rendered λ.
Doesn't matter if there is any fetching inside them.
Only slug pages with generateStaticParams are automatically generated as static.

For example:
app/test/page.tsx


const page = () => {
  return <h1> test page</h1>;
};

export default page;

Output after running npm run build

Route (app)                                   Size     First Load JS
┌ λ /                                         0 B                0 B
├ λ /about-me                                 172 B          71.6 kB
├ λ /backend                                  189 B          89.3 kB
├ λ /backend/[post]                           139 B          66.8 kB
├ λ /frontend                                 189 B          89.3 kB
├ ● /frontend/[post]                          1.4 kB         68.1 kB
├   ├ /frontend/post1
├   ├ /frontend/post2
├   └ /frontend/post3
└ λ /test                                     139 B          66.8 kB
+ First Load JS shared by all                 66.7 kB
  ├ chunks/17-07dd3c6388d7c9b8.js             64 kB
  ├ chunks/main-app-f7991bdf5a7d528d.js       200 B
  └ chunks/webpack-25c60cf3849dbdaa.js        2.52 kB

Route (pages)                                 Size     First Load JS
┌ ○ /404                                      179 B          81.5 kB
└ λ /api/hello                                0 B            81.3 kB
+ First Load JS shared by all                 81.3 kB
  ├ chunks/main-c47fccc8bf0082d4.js           78.6 kB
  ├ chunks/pages/_app-9f5490aa3d56632f.js     192 B
  └ chunks/webpack-25c60cf3849dbdaa.js        2.52 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
    fontLoaders: [
      {
        loader: '@next/font/google',
        options: {
          subsets: ['latin'],
        },
      },
    ],
  },
  images: {
    domains: ['media.graphassets.com', 'avatars.githubusercontent.com'],
  },
};

module.exports = nextConfig;

layout.tsx

import { Roboto } from '@next/font/google';
import { Footer } from './components/footer/Footer';
import { Nav } from './components/nav/Nav';
import { Providers } from './providers';
import './styles/globals.scss';

const font = Roboto({
  weight: ['400', '500', '700'],
});

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html className={font.className} lang="en">
      <head></head>
      <body>
        <Providers>
          <Nav />
          {children}
          <Footer />
        </Providers>
      </body>
    </html>
  );
}

Dont understand why pages are not ssg by default as it should be. I'm trying to make a simple blog using next.js, graphQL and hygraphCMS. In blog everything that can should be server side generated but my project is broken.

Answer 1

In Next.js 13 all pages are SSR by default. To use client rendering add

'use client'

Next.js 13 all pages are server-side render bug

Question

1 answers

solution1
0 2022-12-18 16:15:42

Next.js 13 all pages are server-side render bug

Question

1 answers

solution1 0 2022-12-18 16:15:42

solution1
0 2022-12-18 16:15:42