标签: server-side-rendering

日历小部件首先可以工作，但是如果您刷新页面，它就会停止工作，但只有在网站上线时才会停止工作。在本地开发中，不会出现这样的问题。

还注意到，当我通过导航路由到该页面时，它可以工作。但如果我直接输入特定页面的链接，则不起作用。

这是代码：

    <template>
  <client-only>
    <vue-calendly url="link" :height="650"></vue-calendly>
  </client-only>
</template>

<script>
import Vue from 'vue';

export default {
  created() {
    if (process.isClient) {
      const VueCalendly = require('vue-calendly').default;
      Vue.use(VueCalendly);
    }
  }
};
</script>

Vue 应用程序在 Gridsome 上运行，因此它是 SSR。我将小部件设置为仅在客户端显示。不确定是什么问题。

graphql我在我的应用程序上使用 Apollo Client 作为客户端next.js，以下是为我创建客户端的函数：

let client: ApolloClient<any>;

export const __ssrMode__: boolean = typeof window === "undefined";
export const uri: string = "http://localhost:3001/graphql";

const createApolloClient = (): ApolloClient<any> => {
  return new ApolloClient({
    credentials: "include",
    ssrMode: __ssrMode__,
    link: createHttpLink({
      uri,
      credentials: "include",
    }),
    cache: new InMemoryCache(),
  });
};

令人惊讶的是，当我对 graphql 服务器进行更改时，我能够设置 cookie，但是我无法从客户端获取 cookie。可能是什么问题？

我正在使用 React 和 Next.js 开发一个 Web 应用程序，并且我还有一个作为后端分离的 Node.js API。

我有一个登录表单，我将数据发送到 API 以恢复 JWT，当我这样做时，一切正常，但在将用户重定向到受保护的路由“仪表板”后，或者刷新后，用户上下文会丢失。

这是受保护的路线：

import React, {useContext, useEffect} from 'react'
import { useRouter } from "next/router";
import { Context } from '../../context/context';
export default function DashboardIndexView() {
const router = useRouter();
const {isUserAuthenticated, setUserToken, userToken} = useContext(Context);
useEffect(() => {
    isUserAuthenticated()
    ? router.push("/dashboard")
    : router.push("/authentication/admin");
  }, []);
return (
    <>
    <h1>Dashboard index view</h1>
    </>
)
}

这是上下文文件：

import React, {createContext, useEffect, useState} from 'react'
import { useRouter } from "next/router"; …

我正在尝试在应用程序目录中编写一个 Next.js 13 时事通讯页面，该页面使用依赖于 useEffect 作为 props 的服务器端组件。useEffect 从 REST API 获取数据以获取将呈现页面内容的新闻通讯。我正在使用的代码如下。当我需要“使用客户端”进行交互时，我无法弄清楚如何配置服务器端组件以使其工作。如何确保服务器端组件在发送到客户端之前已渲染？

代码：

import Navbar from '@/components/navbar'
import Footer from '@/components/footer'
import Pagination from './pagination'
import IssueCards from './issueCards';
import { useState, useEffect } from 'react';
import axios from 'axios';


const Newsletters = () => {
    const [issues, setIssues] = useState([]);
    const [currentPage, setCurrentPage] = useState(1);
    const [issuesPerPage, setIssuesPerPage] = useState(5);

    useEffect(() => {
        const fetchIssue = async () => {
            const res = await axios.get(`${process.env.NEXT_PUBLIC_BACKEND_API}/newsletters`)
            setIssues(res.data)
        }
        fetchIssue()
    }, …