Next.js Discord

Discord Forum

simple page triggers ssr instead of ssg on build

Unanswered
Flemish Giant posted this in #help-forum
Open in Discord
Flemish GiantOP
so i have very simple page where i do faq questions and some description in there i have few clients component in there which are faq item
import FAQItem from '@/components/FAQItem/FAQItem'
import { FAQData } from '@/components/FAQItem/FAQItem-types'
import React from 'react'
const placeholderAnw = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
const DeliveryPage = async () => {
  const FAQ : Array<FAQData> = [
    {
      question: "How can I track my order after it has been shipped?",
      answear: placeholderAnw
    },
    {
      question: "Do you offer international shipping?",
      answear: placeholderAnw
    },
    {
      question: "Can I cancel my order before it's shipped?",
      answear: placeholderAnw
    },
    {
      question: "What payment methods do you accept?",
      answear: placeholderAnw
    },
    {
      question: "What is your  return policy",
      answear: placeholderAnw
    }
]
  return (
    <div className='max-w-3xl mx-auto animate-show'>
      <p className='text-4xl font-semibold mb-8 text-center'>Shipping and Returns</p>
      <p className='py-4 indent-6'>Duis rutrum dictum libero quis rutrum. Etiam sed neque aliquam, sollicitudin ante a, gravida arcu. Nam fringilla molestie velit, eget pellentesque risus scelerisque a. Nam ac urna maximus, tempor magna et, placerat urna. Curabitur eu magna enim. Proin placerat tortor lacus, ac sodales lectus placerat quis. </p>
      {FAQ.map((item, key)=><FAQItem key={`faq-${key}`} props={item}/>)}
      
    </div>
  )
}

export default DeliveryPage

13 Replies

Flemish GiantOP
this is my faq item component
"use client"
import { FaArrowRight } from "react-icons/fa6";
import React, { FC, useState } from 'react'
import { FAQData } from "./FAQItem-types";
interface IProps {
    props: FAQData
}
const FAQItem : FC<IProps> = ({props}) => {
    const [isHidden, setVisibility] = useState<boolean>(false);
    return (
    <div>
        <button 
            className='w-full flex justify-between items-center bg-secondary-greyLight p-4 rounded text-primary-accent' 
            onClick={()=>{
                if(isHidden)
                    return setVisibility(false);
                setVisibility(true);
            }}>
                <span className=" uppercase text-lg">{props.question}</span>
                <span className={`${(isHidden)?"rotate-90":""} indent-6 text-lg duration-500`}>{<FaArrowRight/>}</span>
            </button>
        <p className={`transform ${(isHidden?"opacity-100 h-fit":"translate-y-100 scale-y-0 h-0 opacity-0")} py-4 origin-top duration-500`}>{props.answear}</p>
  
    </div>
  )
}

export default FAQItem
there is even simpler page ive made
import React from 'react'

const PrivacyPage = () => {
  return (
    <div className='mx-auto max-w-3xl grid gap-10 animate-show'>
      <p className='text-center text-4xl font-medium'>Privacy Policy</p>
      <p className='text-base'>Duis rutrum dictum libero quis rutrum. Etiam sed neque aliquam, sollicitudin ante a, gravida arcu. Nam fringilla molestie velit, eget pellentesque risus scelerisque a. Nam ac urna maximus, tempor magna et, placerat urna. Curabitur eu magna enim. Proin placerat tortor lacus, ac sodales lectus placerat quis. </p>
      <h1 className=' text-2xl font-medium'>Security</h1>
      <p className='text-base'>Duis rutrum dictum libero quis rutrum. Etiam sed neque aliquam, sollicitudin ante a, gravida arcu. Nam fringilla molestie velit, eget pellentesque risus scelerisque.</p>
      <h1 className='text-2xl font-medium'>Cookies</h1>
      <ul className=' list-disc list-inside'>
        <li>Duis rutrum dictum libero quis rutrum. Etiam sed neque aliquam, sollicitudin.</li>
        <li>Nam fringilla molestie velit, eget pellentesque risus scelerisque a</li>
      </ul>
    </div>
  )
}

export default PrivacyPage
Flemish GiantOP
only thing is session probider
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './../globals.css'
import Footer from '@/components/Footer/Footer'
import { Providers } from './providers'
 import {DM_Sans} from "next/font/google"
import HomeNavigation from '@/components/Navigation/HomeNavigation/HomeNavigation'

 const sans = DM_Sans({
  subsets: ['latin'],
  display: 'swap',
})

export const metadata: Metadata = {
  title: 'Remake Studio',
  description: 'Generated by create next app',
  icons: "/logo-black.svg`"
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  
  return (
    <html lang="en" className={`${sans.className}`}>
      <body className={`px-10 md:px-20   py-8 scroll`}>
        <Providers>
          <HomeNavigation/>
          <main className=' min-h-screen py-10'>
            {children}
          </main>
          <Footer/>
        </Providers>
      </body>
    </html>
  )
}


provider
"use client"
import { SessionProvider } from "next-auth/react";
import { FC, ReactNode } from "react";

interface IProps  { 
    children?: ReactNode
}
export const Providers : FC<IProps>= ({children})=>{

    return <SessionProvider>{children}</SessionProvider>

}
Asian paper wasp
May be that's the reason? Session is meaningless to SSG after all
Not too familiar with next auth though
Flemish GiantOP
is it big deal tho?
ssg vs ssr
i doubt thats the case cuz some of the routes are ssg when i set serversideprops
Asian paper wasp
Only /blog/:slug is static in your screenshot. And that's properly because you used generate static params there
Flemish GiantOP
yes
so session probider does not collide with it