how can i convert a ssg page into ssr in NextJs

I am trying to deploy a NextJs app on vercal in which Home Page or Index Page is building statically(SSG) but I want it as Server Side Render(SSR) because it has a Feed Component(CSR) Which fetches data from database at each request and display it to the home page.

"next": "13.4.4",

layout of home-page

import "@/styles/globals.css";

import Nav from "@/components/Nav";
import Provider from "@/components/Provider";

export const metadata = {
  title: "",
  description: "",
};

const RootLayout = ({ children }) => {
  return (
    <html lang="en">
      <body>
        <Provider>
          <div className="main">
            <div className="" />
          </div>
          <main className="app">
            <Nav />
            {children}
          </main>
        </Provider>
      </body>
    </html>
  );
};

export default RootLayout;

content of home page

import Feed from "@/components/Feed" 

const Home = () => {
  return (
    <section className="w-full flex-center flex-col">
        <h1 className="head_text text-center"> Discover & Share
        <br className="max-md:hidden"/>
        <span className="orange_gradient text-center"> ""</span>
        </h1>
        <p className="desc text-center">
            ""
        </p>
        <Feed/>
    </section>
  )
}

export default Home

Feed Component

"use client";
import React from "react";
import { useState, useEffect } from "react";
import PromptCard from "./PromptCard";

const PromptCardList = ({ data, handleTagClick }) => {
  return (
    <div className="mt-16 prompt_layout">
      {data.map((post) => (
        <PromptCard
          key={post._id}
          post={post}
          handleTagClick={handleTagClick}
        />
      ))}
    </div>
  );
};

const Feed = () => {
  // Search states
  const [searchText, setSearchText] = useState("");
  const [searchTimeout, setSearchTimeout] = useState(null);
  const [searchedResults, setSearchedResults] = useState([]);
  const [posts, setPosts] = useState([]);

  const fetchPosts = async () => {
    const res = await fetch("/api/prompt",{cache : 'no-store'});
    const data = await res.json();
    setPosts(data);
  };

  useEffect(() => {
    fetchPosts();
  },[]);

  const filterPrompts = (searchtext) => {
    const regex = new RegExp(searchtext, "i"); // 'i' flag for case-insensitive search
    return posts.filter(
      (item) =>
        regex.test(item.creator.username) ||
        regex.test(item.tag) ||
        regex.test(item.prompt)
    );
  };

  const handleSearchChange = (e) => {
    clearTimeout(searchTimeout);
    setSearchText(e.target.value);

    // debounce method
    setSearchTimeout(
      setTimeout(() => {
        const searchResult = filterPrompts(e.target.value);
        setSearchedResults(searchResult);
      }, 500)
    );
  };
  const handleTagClick = (tagName) => {
    setSearchText(tagName);

    const searchResult = filterPrompts(tagName);
    setSearchedResults(searchResult);
  };

  return (
    <section className="feed">
      <form className="relative w-full flex justify-center items-center">
        <input
          type="text"
          placeholder="search for a tag or a username"
          value={searchText}
          required
          className="search_input peer"
          onChange={handleSearchChange}
        />
      </form>
      {searchText ? (
        <PromptCardList
          data={searchedResults}
          handleTagClick={handleTagClick}
        />
      ) : (
        <PromptCardList data={posts} handleTagClick={handleTagClick} />
      )}
    </section>
  );
};

export default Feed;

I have implemented {cache : 'no-store'} approach in API fetch request in Feed Component and Redeploy but still no changes as it still shows statically generated page. I am expecting a solution to Server Side Render or Incremental Static Generation Home Page at each request

Upvotes: 0

Answers (2)

Michael Walker

Reputation: 91

What does your next.config look like?

Potentially you will need to remove the export key from your next.config option

See here for more information: https://nextjs.org/docs/pages/api-reference/next-config-js/output

Are you calling getStaticProps in any of the parent components?

If you do have getStaticProps in your parent component, it will pre-render this page at build time, you will want to replace it with getServerSideProps

https://nextjs.org/docs/pages/building-your-application/data-fetching/get-server-side-props

Upvotes: 0

Saiful Islam

Reputation: 1

Make your home page another component with Feed Component like HomeComponent. Then HomeComponent calls into your home page. Hope it will work

Upvotes: 0

how can i convert a ssg page into ssr in NextJs

Answers (2)

Related Questions