标签: server-side-rendering

I've been using this vite-plugin-ssr with firebase functions happily until one day firebase-admin bailed on me. My setup was working until I deleted my node modules and reinstalled my dependencies. It seems that vite is bundling firebase-admin with the client even though there are no imports in clientside code referring to firebase-admin, only in the .page.server.ts files. How do I specify to vite or rollup to not bundle firebase-admin into the dist/client directory?

I would really appreciate some …

我很困惑如何让当前用户使用SSR来获取一些用户数据。

我一直在使用 context API 和 React，到目前为止它一直在工作，直到我需要 SSR 从 API 获取数据。我想获取当前用户 ID，这样我就可以获得存储在 Firestore 中的令牌。

Auth.js

export const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    onAuthStateChanged(auth, (user) => {
      setCurrentUser(user);
    });
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
}

固态继电器

export async function getStaticProps() {
  const api = {
    auth: "token",
  };

  //fetch api

  return {
    props: {
      data,
    },
  };
}

我正在尝试尝试最新版本的 NextJS（版本 12），以使我的项目能够访问 SSR ServerComponents 和 Http 流。

MaterialUI 与 Next 12.0.7 和 React 17 配合良好（使用 npx create-next-app@latest 安装）

当我做

npm install react@beta react-dom@beta

然后

npm install @mui/material @mui/styled-engine-sc styled-components --save

给予

(base) marcfielding@MBP meta-ui % npm install @mui/material @mui/styled-engine-sc styled-components --save

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: meta-ui@undefined
npm ERR! Found: react@18.0.0-rc.0-next-f2a59df48-20211208
npm ERR! node_modules/react
npm ERR!   react@"^18.0.0-beta-24dd07bd2-20211208" from the root project
npm ERR! 
npm ERR! Could …

我正在使用路线来获取页面 ex。page/[id].js并仅显示该 id 的数据。那么每次访问该页面时它都会重新获取数据吗？前任。通过此页面上的链接转到下一页，然后按返回返回此页面。就像在 React.js 中使用DidComponentMount它获取数据一样，每次安装时都会进行获取，即使您返回时已经访问过该页面。

export async function getStaticProps(context) {
    const res = await fetch(`https://.../data/${context.params.id}`)
    const data = await res.json()
    return {
        props: { data }
    }
}

router.query.title当我刷新页面时消失。

据我发现，我必须使用 getServerSideProps，但我不知道在 getServerSideProps 上输入什么。或者有什么办法可以做到吗？

编辑：我尝试了 Yilmaz 的解决方案并删除了 as={} 现在它可以工作了。但是现在查询链接太长而不使用 as={} 有什么解决方案吗？

索引.tsx

const Projects = () => {
  const [projects, setProjects] = useState(data);

  {projects.slice(0, loadMore).map((project) => (
          <Link
            key={project.id}
            href={{
              pathname: "/projects/" + project.title,
              query: {
                id: project.id,
                category: project.category,
                title: project.title,
                image: project.image.src,
                image1: project.image1.src,
                image2: project.image2.src,
                image3: project.image3.src,
                image4: project.image4.src,
                image5: project.image5.src,
              },
            }}
            as={"/projects/" + project.title}
            passHref={true}
          >
}

[id].tsx

import { GetServerSideProps } from "next";

export const getServerSideProps: GetServerSideProps = async (context) => { …

我们如何通过 SSR 提高 Nuxt 的速度性能有以下几点。

• 减少未使用的 JavaScript
• 避免为现代 JavaScript 提供遗留服务
• 最小化主线程工作
• 减少 JavaScript 执行时间
• 避免巨大的网络负载

我在 next.js 应用程序中使用 use-sse （服务器端渲染挂钩），但收到错误“水合时出错。因为错误发生在 Suspense 边界之外，所以整个根将切换到客户端”渲染。” 该代码与链接https://github.com/kmoskwiak/useSSE类似。不幸的是，我无法预测 next.js 应用程序中的水合错误。这里面有什么问题吗？这是代码：

import { useSSE } from "use-sse";
import React from 'react';

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

export default function Todo() {
    const [todos, error] = useSSE(() : Promise<Todo[]>=> {
      
        return fetch("https://jsonplaceholder.typicode.com/todos").then(
          (response: Response) => response.json()
        );
       
      }, []);
      console.log(todos);
      if (error) return <div>{error.message}</div>;
    
      if (!todos?.length) return <span>Todo is Loading...</span>;
    
      return (
        <section>
          <h1>Todo List</h1>
          <ul>
            {todos.map((todo: Todo) => {
              return (
                <li key={todo.id}> …

听说Blazer服务器是SSR（服务器端渲染）。顺便说一句，我知道 Blazer 服务器是单页应用程序 (SPA)。Blazer服务器是否同时具有SSR和SPA？那么Blazer服务器是不是先通过SSR方式接收数据，再通过CSR方式接收数据来实现SPA呢？

我正在尝试构建 Next13 应用程序。新的布局很酷，但它扰乱了渲染。我不完全理解布局中渲染对象的顺序：

导航栏.tsx

"use client";
import Link from "next/link";

export default () => {
  return (
    <span className="flex justify-between">
      <h1 className="text-xl">Navigation Bar</h1>
      <ul className="flex gap-4">
        <li>
          <Link href="/">Home</Link>
        </li>
        <li>
          <Link href="/user/login">Login</Link>
        </li>
        <li>
          <Link href="/user/signup">Sign Up</Link>
        </li>
      </ul>
    </span>
  );
};

布局.tsx

import "./globals.css";
import NavBar from "./NavBar";

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html className="bg-slate-500 font-robslab" lang="en">
      <head>
        <title>Stylitique</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" …

我正在使用应用程序路由器在 nextjs 中构建一个博客网站。我被静态网站生成困住了。我尝试阅读nextjs 的官方文档，但无法理解它......请帮助我。这是我的项目结构。我有一个存储博客数据的文件，即 blogData.js

import { FullStackDeveloper, GraphicDesigner } from "@/assets/team";
    
    const BlogData = [
      {
        id: 0,
        title: "Exploring the Power of React.js for Interactive Web Applications",
        cover: FullStackDeveloper,
        desc: "Delve into the incredible capabilities of React.js for creating dynamic and interactive web applications. Discover how React.js enhances user experience, improves performance, and enables seamless data management. Gain insights into the benefits and best practices of using React.js for your next web development project.",
        keywords: …