下一个js 13.2.3
Next js 不能使用 table 元素。
"use client";
export default function index() {
return (
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
)
}
它有效，但我收到错误。
Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Warning: Expected server HTML to contain a matching <tr> in <table>.
我应该停止使用这个元素还是可以解决这个问题？
https://stackblitz.com/edit/nextjs-jvjltx?file=app%2Fpage.js - 示例
在 SvelteKit 中，商店似乎在客户端和服务器端之间不同步。换句话说，如果在客户端修改了一个存储，那么当在服务器端检索它时，它就不会被修改，反之亦然。
您可以在下面的最小可重现示例中看到此行为：
https://stackblitz.com/edit/sveltejs-kit-template-default-fpp2y8?file=src/routes/+page.svelte
我的问题是：在客户端修改服务器端存储的惯用或正常方法是什么？
为了避免XY Problem，我具体尝试做的事情如下：
EPOS 系统的用户有一个“currentSale”商店，该商店在访问/epos服务器端的路由时加载，专门用于使Prisma可以获得有关产品、客户附加等的更多信息。
然而，例如，当用户尝试增加 EPOS 销售中的产品数量时，就会出现问题。尝试更新商店不起作用，因为它不会保存服务器端。使用整个 API 路径或表单操作似乎太过分了，而且不是优化/最佳的。
在 Next.js 中，当缓存不可用时，Next.js 将转至 SSR 页面并显示它（基于首选回退方法 true 或阻塞）。
我想知道 Astro.jd 在这种情况下采取了什么方法。我将创建一个动态博客网站，用户可以快速创建博客。
我是否必须每次都构建静态页面，还是最好采用 Astro.js SSR 方法？
我曾经认为，当您使用该"use client"指令声明页面或组件时，您将无法在浏览器的“查看页面源代码”上看到这些页面，因为它们仅在客户端使用 JS 呈现（仅就像纯 React 发生的情况一样）。
然而，我刚刚测试了这个案例，发现几乎所有在“使用客户端”下编写的内容仍然显示在页面源代码上。那么服务器组件和带有“使用客户端”指令的 SEO 组件之间有什么区别呢？
使用服务器组件也有助于 SEO 吗？或者它的主要应用是为了提高性能？
我一直在努力使我的vuejs应用程序与SSR功能良好,但我的所有尝试都失败了.我真的需要帮助.
请注意,我使用普通的js文件,而不是使用es6的.vue文件,并且需要使用webpack require函数的html模板.
该应用程序在开发模式下工作正常,但是,当我使用'vue-server-renderer'开始执行它并转到任何路由时,将抛出此错误:
错误:在组件中未定义渲染函数或模板:在presentationComponent(/ Users/salaahassi /)上的normalizeRender(/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6015:13)中匿名dev/vue/magicum/node_modules/vue-server-renderer/build.js:6081:3)在renderNode(/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6065: 7)在渲染(/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:6257:5)RenderStream.render(/ Users/salaahassi/dev/vue/magicum/node_modules /) vue-server-renderer/build.js:6312:9)RenderStream.tryRender(/Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:96:12)在RenderStream._read (/ Users/salaahassi/dev/vue/magicum/node_modules/vue-server-renderer/build.js:125:12)在RenderStream.Readable.read(_stream_readable.js:348:10)的resume_(_ stream_readable.js: 737:12)在_combinedTickCallback(internal/process/next_tick.js:74:11)
此外,当我在我的浏览器上禁用javascript时,即使主页也会消失(当然这是因为它不能通过SSR工作).
这是我的webpack:
var path = require('path')
var webpack = require('webpack')
var HTMLPlugin = require('html-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var extractCSS = new ExtractTextPlugin('styles.css');
var options = {
// entry: './entry.client.js',
entry: {
app: './entry.client.js',
vendor: [
'vue',
'vue-router',
'vuex',
'vuex-router-sync',
'moment',
'axios'
]
},
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/',
filename: '[name].[hash].js',
},
module: {
noParse: /es6-promise\.js$/, // avoid webpack …假设我的 html 文档中有以下脚本标签：
<script type="application/json" id="stuff">
{
"unicorns": "awesome",
"abc": [1, 2, 3]
}
</script>
我正在我的应用程序中解析这个 JSON。有人告诉我，...
这种在脚本标签中嵌入 json 的方法存在潜在的安全问题。假设 json 数据源自用户输入，则可以制作一个数据成员，该成员实际上会脱离脚本标记并允许直接注入到 dom 中。看这里：
<script type="application/json" id="stuff">
{
"unicorns": "awesome",
"abc": [1, 2, 3],
"badentry": "blah </script><div id='baddiv'>I should not exist.</div><script type="application/json" id='stuff'> ",
}
</script>
我需要在脚本标签中嵌入一个 JSON，但我不知道我应该如何做到这一点，而不会泄露安全漏洞。
谢谢你的帮助。
Angular 4.4.6
Angular CLI 1.3.2
Node 6.x.x
NPM 3.10.10
Webpack 3.4.1
在 Angular Universal 应用程序中，当服务器视图切换到客户端视图时，屏幕会出现闪烁，因为在服务器端渲染中调用的所有 API 也在客户端渲染中调用，因为存在闪烁。
为了消除这种闪烁，我实现了 Angular Universal Transfer Module，它private _map = new Map<string, any>();在服务器端渲染时将数据存储在地图缓存 ( ) 中，并将其传输到客户端，因此客户端不需要再次调用 api 并立即从缓存中获取数据。
转移是通过该提供商进行的。
{
provide: APP_BOOTSTRAP_LISTENER,
useFactory: onBootstrap,
multi: true,
deps: [
ApplicationRef,
TransferState
]
}
export function onBootstrap(appRef: ApplicationRef, transferState: TransferState) {
return () => {
appRef.isStable
.filter(stable => stable)
.first()
.subscribe(() => {
transferState.inject();
});
};
}
这样闪烁消失了，但应用程序性能下降了，在对应用程序进行负载测试时，闪烁的结果比非闪烁的应用程序更快，这是为什么？
可能是因为在负载测试或机器人访问网站的情况下，没有浏览器所以缓存永远不会被清除，它只是用缓存内存填充服务器并且服务器变慢，有什么解决方案可以解决这个问题，要么创建机器人和真实用户的不同实例，通过在 nginx 级别识别请求，oe 还有一些我在 angular Universal 中缺少的东西。
javascript nginx server-side-rendering angular-universal angular
我正在开发 vue2+nuxt 应用程序，我正在使用 vuex+persisted state 包。在其中一个组件中，我根据状态布尔变量显示带有条件的 div：
<template>
<div class="nav__topbar" v-if="show">
....
</div>
</template>
<script>
export default {
computed: {
show() {
return this.$store.state.navInfo.navInfo
}
}
}
</script>
一切正常 - 如果this.$store.state.navInfo.navInfo为真，则显示，否则显示消失。同样在刷新后它仍然有效。
我无法解决的唯一问题是，在刷新 div 显示一秒钟后布尔值为 false 时。它在说 0.2 秒后消失了，但即使它如此之快，它仍然会使页面“跳跃”，因为它.nav__topbar是 100% 宽度和 20vh 高度。因此，有一段时间我可以看到这个 div，然后它会隐藏并且所有页面都跳起来，这看起来非常难看，我无法忽略它。
有什么办法可以防止这种行为吗？
也许我可以使用 Nuxt 提供的这个 fetch() 或 asyncData 钩子？
我打算进行服务器端渲染以与事件处理程序做出反应，但我遇到了在 localhost express 服务器中获取 index.js 文件的问题。试图在这里寻找其他几个答案，但我似乎无法解决这个问题。
这是代码。
import express from "express";
import React from "react";
import { renderToString } from "react-dom/server";
import App from "./app/home/app";
import path from "path";
import fs from "fs";
let server = port => {
const app = express();
app.use('/js', express.static(path.resolve('/static')));
console.log(path.resolve('/static'));
console.log(path.join(__dirname, '/static'));
console.log(fs.existsSync(path.resolve('/static')));
app.get("/", (req, res) => {
res.status(200).send(renderMarkup(renderToString(<App />)));
});
app.get("/ping", (req, res) => {
res.status(200).send("HELLO!");
});
app.listen(port, () => console.log("Server Ready!"));
}
let renderMarkup = html => {
return `
<!DOCTYPE html> …我正在组件内部使用链接来转到不同的页面，例如
<Link to={'/documents/' + x.id}></Link
但是，这会导致SEO问题，因为页面更改时元标记不会刷新。我也在使用服务器端渲染。
什么是使用链接仍然可以流畅地进行页面更改并且仍然可以进行SEO优化的正确方法。
谢谢