How to not opt in to full SSR? | Next.js | Page 1

icy current Feb 6, 2024, 10:54 PM

#

I have a page which contains 4 sections, 1 of those sections is dynamic. How can I make the rest of the sections SSG while keeping the dynamic one SSR?

solid viperBOT Feb 6, 2024, 10:54 PM

#

Hi @icy current. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

You can achieve this by using a combination of Static Site Generation (SSG) and Client-side Rendering (CSR) in Next.js.

For the static sections of your page, you can pre-render them at build time using SSG. This can be done by using the getStaticProps function in Next.js. This function gets called at build time and lets you pass fetched data to the page's props on pre-render. Here's an example of how to use getStaticProps:

export default function Page({ staticData }) {
  // Render staticData...
}
 
// This function gets called at build time
export async function getStaticProps() {
  // Fetch static data
  const staticData = await fetchStaticData()
 
  // By returning { props: { staticData } }, the Page component
  // will receive `staticData` as a prop at build time
  return {
    props: {
      staticData,
    },
  }
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation#static-generation-with-data))

For the dynamic section of your page, you can use Client-side Rendering. You can skip pre-rendering this part of the page and then use client-side JavaScript to populate it. This can be done by fetching the data for this section inside a useEffect hook in your component. Here's an example:

import { useState, useEffect } from 'react'

function DynamicSection() {
  const [dynamicData, setDynamicData] = useState(null)

  // Fetch dynamic data on client-side
  useEffect(() => {
    async function fetchData() {
      const res = await fetch('/api/dynamic-data')
      const data = await res.json()
      setDynamicData(data)
    }

    fetchData()
  }, [])

  // Render loading state
  if (dynamicData === null) {
    return <div>Loading...</div>
  }

#

// Render dynamicData
return <div>{dynamicData}</div>
}

This way, the static sections of your page will be pre-rendered at build time using SSG, and the dynamic section will be rendered on the client-side using CSR.

(Source: **Next.js Docs** (<https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering#next-steps>))
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@icy current kapa.ai is still learning and improving, please let us know how it did by reacting below

icy current Feb 6, 2024, 10:55 PM

#

@solid viper in app router

solid viperBOT Feb 6, 2024, 10:55 PM

#

Let me check the knowledge base for you. One moment! :books:

#

In the App Router of Next.js, you can use a combination of Server Components and Client Components to achieve a similar effect.

Server Components are rendered on the server and sent to the client as HTML. They can access server-side data directly and can be used for the static sections of your page. Here's an example of a Server Component:

// This will be a Server Component
export default function StaticSection() {
  // Fetch static data and render it
  const staticData = fetchStaticData()
  return <div>{staticData}</div>
}

(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/rendering/server-components))

Client Components, on the other hand, are rendered on the client and can be used for the dynamic section of your page. They can fetch data on the client-side and update in response to user input. Here's an example of a Client Component:

import { useState, useEffect } from 'react'

// This will be a Client Component
export default function DynamicSection() {
  const [dynamicData, setDynamicData] = useState(null)

  // Fetch dynamic data on client-side
  useEffect(() => {
    async function fetchData() {
      const res = await fetch('/api/dynamic-data')
      const data = await res.json()
      setDynamicData(data)
    }

    fetchData()
  }, [])

  // Render loading state
  if (dynamicData === null) {
    return <div>Loading...</div>
  }

  // Render dynamicData
  return <div>{dynamicData}</div>
}

(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/rendering/client-components))

By default, components inside the app directory are Server Components, but you can also use Client Components by wrapping them with client:

import { client } from 'next/app'
import DynamicSection from '../components/DynamicSection'

#

// Wrap the Client Component with client
const ClientDynamicSection = client(DynamicSection)

export default function Page() {
return (
<div>
{/* Render the Server Components /}
<StaticSection />
{/ Render the Client Component */}
<ClientDynamicSection />
</div>
)
}

(Source: **Next.js Docs** (<https://nextjs.org/docs/app/building-your-application/rendering/client-components#next-steps>))

This way, the static sections of your page will be rendered on the server using Server Components, and the dynamic section will be rendered on the client using Client Components.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

#

@icy current kapa.ai is still learning and improving, please let us know how it did by reacting below

icy current Feb 6, 2024, 10:58 PM

#

@solid viper what is the recommended nextjs way to fetch CSR?

#

<@&1089670008898080870> what is the recommended nextjs way to fetch CSR?

#

@solid viper what is the recommended nextjs way to fetch CSR?

solid viperBOT Feb 6, 2024, 10:58 PM

#

Let me check the knowledge base for you. One moment! :books:

#

Next.js recommends two ways to implement client-side rendering (CSR):

Using React's useEffect() hook inside your pages instead of the server-side rendering methods (getStaticProps and getServerSideProps).

Here's an example of using useEffect() inside a Next.js page:

import React, { useState, useEffect } from 'react'
 
export function Page() {
 const [data, setData] = useState(null)
 
 useEffect(() => {
 const fetchData = async () => {
 const response = await fetch('<https://api.example.com/data'>)
 if (!response.ok) {
 throw new Error(`HTTP error! status: ${response.status}`)
 }
 const result = await response.json()
 setData(result)
 }
 
 fetchData().catch((e) => {
 // handle the error as needed
 console.error('An error occurred while fetching the data: ', e)
 })
 }, [])
 
 return <p>{data ? `Your data: ${data}` : 'Loading...'}</p>
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering))

Using a data fetching library like SWR or TanStack Query to fetch data on the client. This is the recommended approach for better performance, caching, optimistic updates, and more.

Here's a minimum example using SWR to fetch data on the client:

import useSWR from 'swr'
 
export function Page() {
 const { data, error, isLoading } = useSWR(
 '<https://api.example.com/data',>
 fetcher
 )
 
 if (error) return <p>Failed to load.</p>
 if (isLoading) return <p>Loading...</p>
 
 return <p>Your Data: {data}</p>
}

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering))

#

Remember that CSR can impact SEO and performance for users with slower internet connections or devices, as they need to wait for all the JavaScript to load and run before they can see the full page. Next.js promotes a hybrid approach that allows you to use a combination of server-side rendering, static site generation, and client-side rendering, depending on the needs of each page in your application.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@icy current kapa.ai is still learning and improving, please let us know how it did by reacting below

icy current Feb 7, 2024, 1:05 PM

#

@solid viper how to insert css into html doc?

solid viperBOT Feb 7, 2024, 1:05 PM

#

Let me check the knowledge base for you. One moment! :books:

#

In Next.js, there are several ways to insert CSS into your HTML document:

Global CSS: You can add a global CSS file by importing it within pages/_app.js. For example:

import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

These styles (styles.css) will apply to all pages and components in your application. You may only import them inside pages/_app.js to avoid conflicts. In production, all CSS files will be automatically concatenated into a single minified .css file.
(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/styling/css-modules#global-styles))

CSS Modules: You can create locally scoped CSS classes to avoid naming conflicts and improve maintainability. To enable CSS Modules for a file, rename the file to have the extension .module.css. For example:

import styles from './Button.module.css'
 
export function Button() {
  return (
    <button
      type="button"
      className={styles.error}
    >
      Destroy
    </button>
  )
}

In production, all CSS Module files will be automatically concatenated into many minified and code-split .css files.
(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/styling/css-modules))

CSS-in-JS: You can embed CSS directly in your JavaScript components, enabling dynamic and scoped styling. For example, using styled-jsx:

#

function HelloWorld() {
  return (
    <div>
      Hello world
      <p>scoped!</p>
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
    </div>
  )
}
 
export default HelloWorld

(Source: Next.js Docs (https://nextjs.org/docs/pages/building-your-application/styling/css-in-js))

Tailwind CSS: If you're using Tailwind CSS, you can configure it in your tailwind.config.js file and use utility classes in your components. For example:

import 'tailwindcss/tailwind.css'

function Component() {
  return <div className="text-blue-500">Hello, world!</div>
}

(Source: Next.js Docs (https://nextjs.org/docs/app/building-your-application/styling/tailwind-css))

Remember, manual stylesheet tags (`<link rel="stylesheet" href="...">`) are not recommended in Next.js as they can negatively affect CSS resource loading on your webpage.
(Source: Next.js Docs (https://nextjs.org/docs/messages/no-css-tags))

#How to not opt in to full SSR?

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Remember, manual stylesheet tags (<link rel="stylesheet" href="...">) are not recommended in Next.js as they can negatively affect CSS resource loading on your webpage. (Source: Next.js Docs (https://nextjs.org/docs/messages/no-css-tags))

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Remember, manual stylesheet tags (`<link rel="stylesheet" href="...">`) are not recommended in Next.js as they can negatively affect CSS resource loading on your webpage.
(Source: Next.js Docs (https://nextjs.org/docs/messages/no-css-tags))