标签: server-side-rendering

我有一个主站点和一个用 flutter 编写的移动应用程序。我想在m.example.com. 但是SEO优化存在问题。有没有人有在颤振（ssr、prerender、amp 等）中实现 seo 的真实经验？或者只在没有 SEO 的网站上使用 flutter-web？

我有一个带有服务器端渲染的工作 Vue 2 应用程序。现在我正在尝试升级到 Vue 3 但卡在 SSR 部分因为 vue-server-renderer 包抛出以下错误：

Vue packages version mismatch: - vue@3.0.0 - vue-server-renderer@2.6.12 This may cause things to work incorrectly. Make sure to use the same version for both.

但是 vue-server-renderer 没有 3.0.0 版本...

通过谷歌搜索，我在 vue-next 存储库中发现了这个问题：https : //github.com/vuejs/vue-next/issues/1327

但是对我来说，vue 3 版本如何实现 SSR 还是不太清楚。已经可以了吗？是否有如何在 Vue 3 中使用 SSR 的示例？

我是 Next.js 的新手，我正在尝试理解建议的结构并处理页面或组件之间的数据。

例如，在我的页面中home.js，我获取了一个调用的内部 API /api/user.js，它从 MongoDB 返回一些用户数据。我通过使用fetch()从 inside 调用 API 路由来做到这一点getServerSideProps()，它在一些计算后将各种道具传递给页面。

根据我的理解，这对 SEO 有好处，因为道具在服务器端被获取/修改，页面让它们准备好呈现。但后来我的Next.js文档，你不应该用在阅读fetch()到所有的API路线getServerSideProps()。那么我应该怎么做才能遵守良好的实践和良好的 SEO？

我没有home.js在 API 路由本身中进行所需计算的原因是我需要来自这个 API 路由的更多通用数据，因为我也会在其他页面中使用它。

我还必须考虑缓存，哪个客户端使用 SWR 来获取内部 API 非常简单，但服务器端我还不确定如何实现它。

home.js：

export default function Page({ prop1, prop2, prop3 }) {
        // render etc.
}

export async function getServerSideProps(context) {
  const session = await getSession(context)
  let data = null
  var aArray = [], bArray = [], cArray = []
  const { …

通过使用React Developer Tools可以很容易地判断网站是否使用 ReactJS 。

然而，我知道一个使用ReactJS和服务器端渲染的网站（整个页面是用React组件构建的，但页面源包含整个HTML）。是否可以判断该网站是否使用Next.js特别用于 SSR？

Next.js 是否在前端留下任何可检测到的痕迹？

我有一个无服务器 Next.js 应用程序，其中有一些组件依赖于从 redux 存储传递下来的数据。目前，我的方法需要 redux-persist 在用户导航时保存存储，否则如果存储中的数据不存在，上述组件将崩溃。我遇到的问题是，包裹整个应用程序的 redux-persist 的 PersistGate 阻止了对站点的外部请求访问每个页面内的动态元标记。像 metatags.io 这样的工具只能看到来自 persistgate 的加载组件。

如果我删除门，那么标头标签将呈现良好，但 redux 状态不再持久，如果用户刷新某些页面上的页面，则会导致问题。

我已经尝试了此 github 问题中讨论的一些方法，但有条件地包装 persistgate 仍然会导致问题，并且“next/head”组件在实际主体而不是头部内呈现。

我对 Next.js 还很陌生，它提供的 SEO 改进是我选择它而不是普通 React 的原因。我愿意接受一些不涉及 redux-persist 以及可能使用本地存储的模式建议。

这是 _app.js 目前的布局：

import App from 'next/app';
// Redux:
import { useStore } from 'redux/store';
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import LoadingView from 'components/base/LoadingView';
import Layout from 'components/base/Layout';
// i18n wrapper:
import { appWithTranslation …

如何显示我自己的加载程序而不是空白屏幕？例如，Tweeter 在页面加载时显示徽标，对于 Facebook、Google AdSense 等也是如此。看看这个 Gif，我想要在 Next Js 中出现类似的内容。

我想这与 _document.js 有关。React js 有一个类似的问题（在 index.html 中渲染加载器），但我不知道如何在下一个 js 中做到这一点。

我正在使用 Nextjs 和 next-auth 在后端使用 node.js 进行身份验证。现在，我在 node.js 中设置 cookie，它在 postman 中可以正常工作。我可以验证，没有任何问题。当谈到 NextJs 时，由于我只res.data从响应中返回 ，它本质上包含用户数据而不是 JWT ，所以我无法将 cookie 传递到前端。因此，我没有对 Node.js 进行身份验证。我检查了 next-auth 上的 cookie 文档，但无法使其工作。

代码为./api/[...nextauth.ts]

import axios from 'axios'
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.Credentials({
      name: 'Credentials',
      credentials: {
        email: { label: "Email", type: "email", placeholder: "Your email" },
        password: { label: "Password", type: "password",placeholder: "*********" }
      },
      async authorize(credentials:any, req) …

我有以下自定义挂钩，它将数据存储在本地存储中：

import { useCallback, useEffect, useState } from "react";

export const useLocalStorage = (key, initialValue) => {
  const initialize = (key) => {
    try {
      const item = localStorage.getItem(key);
      if (item && item !== "undefined") {
        return JSON.parse(item);
      }

      localStorage.setItem(key, JSON.stringify(initialValue));
      return initialValue;
    } catch {
      return initialValue;
    }
  };

  const [state, setState] = useState(() => initialize(key)); // problem is here

  const setValue = useCallback(
    (value) => {
      try {
        const valueToStore = value instanceof Function ? value(storedValue) : value; …

我在服务器端预渲染的 net6.0 应用程序上使用 HeadOutlet 来设置一些标头标签，例如元描述，但服务器首先渲染应用程序，然后渲染标头，这使得搜索引擎忽略它。

@page "/"
@namespace Example.Pages
@using Microsoft.AspNetCore.Components.Web
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    Layout = null;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
    <base href="~/" />

    <link href="css/site.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
</head>
<body>
    <component type="typeof(App)" render-mode="ServerPrerendered" />

    <div id="blazor-error-ui">
        <environment include="Staging,Production">
            An error has occurred. This application may no longer respond until reloaded.
        </environment>
        <environment include="Development">
            An unhandled exception has occurred. See browser dev tools for details.
        </environment>
        <a href="/" class="reload">Reload</a>
        <a href="#" …

我有3个webpack.config文件来启用Server-Sive-Rendering。

• webpack.base.js
• webpack.client.js
• webpack.server.js

构建脚本

"scripts": {
        "dev": "npm-run-all --parallel dev:*",
        "dev:bundle": "nodemon --watch build --exec \"node build/bundle.js\"",
        "dev:server": "webpack --config webpack.server.js --watch",
        "dev:client": "webpack --config webpack.client.js --watch"
      }

我正在努力在SSR上设置CSS。

当我尝试：

• npm run dev：client->它没有错误！

• npm运行dev：server->它没有错误！

但是，npm run dev：bundle我收到一条错误消息。

这是我的webpack设置

webpack.base.js

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production';

module.exports = {
    module: {
        rules: [
            {
                test: /\.js?$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    presets: [
                        'react',
                        'stage-0',
                        ['env', { target: { browsers: ['last 2 versions'] }}]
                    ] …