我正试图部署一个NextJs应用程序在vercal中的主页或索引页是静态建设（SSG），但我希望它作为服务器端渲染（SSR），因为它有一个饲料组件（CSR）从数据库中获取数据在每个请求，并显示它的主页。
“next”：“13.4.4”，
主页布局

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;

字符集
主页内容

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

型
进料组分

"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;

型
我已经实现了{cache：Feed Component和Redeploy中的API fetch请求中的'no-store'}方法，但仍然没有更改，因为它仍然显示静态生成的页面。我期待一个解决方案，服务器端渲染或增量静态生成主页在每个请求