admin管理员组

文章数量:1419202

I have three files, all in the folder 'test':

  • actions.ts
  • page.tsx
  • Test.tsx

The problem is that upon making a change in test.tsx (client side), I see [Fast Refresh] rebuilding for my page.tsx, and my page.tsx logs (so it gets reloaded).

//actions.ts

"use server";

export async function printHeyServerSide() {
    console.log("Hey from the server!");
}

//page.tsx

import GraderInterface from "./Test"

export default async function GraderPage() {
  // This is expected to only run during initial page load 
  console.log("Server component rendering")

  const studentAnswers = []
  return (
      <div>
      <GraderInterface  />
  </div>
  )
}

//Test.tsx

"use client";

import { printHeyServerSide } from "./actions";
import { Button } from "@/components/ui/button";

export default function GraderInterface() {
    const handleClick = async () => {
        await printHeyServerSide();
    };

    return (
        <div>
            <Button onClick={handleClick}>Print Hey</Button>
        </div>
    );
}

Expected result: No [Fast Refresh] rebuilding / "Server component rendering" messages when the user clicks the Print Hey button.

What did I try:

  • The bigger goal is to fetch data Server Side, pass it to the client, make updates there, and insert it in the database, without updating SS again and again
  • I changed my next.config.ts files.

next.config.ts:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  reactStrictMode: false, 

  experimental: {
    ppr: true,
    turbo: {
      resolveAlias: {
        canvas: './empty-module.ts', // Workaround for canvas module
      },
    },
  },
  transpilePackages: ['@radix-ui/react-primitive', 'lucide-react'],
  webpack(config) {
    // Adding PDF.js worker configuration
    config.resolve.alias['pdfjs-dist$'] = require.resolve('pdfjs-dist');
    return config;
  },
  
};

export default nextConfig;

本文标签: nextjsNextJS fast refresh pagetsx on updating server sideStack Overflow