Static GitHub Issues

[209] Server-side rendering and native html incompatibility issues

prev: launch project
next: How to add an alias for a route?

When I use nuxt.js for server-side rendering, I will encounter the following two issues, it now appears that these two issues are caused by vue.js:

1: I used the swiper component in the project. Since this component depends on the window object, I used the process.BROWSER_BUILD object judgment in nuxt.js to render the component only on the server side. When the page loads, the component renders correctly , The correct rendering, view the source code, you can see the corresponding swiper component code is not compiled before the component call code, such as: <swiper> ... </ swiper>, then the console by vue.js abnormal

Vue warn: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. And performing full client-side render.

This should not have existed

2: When I use the datalist element in html5 in a project, vue also throws an error like the one above

So I think, vue on the original html tags may not be sufficient to judge the rich, while rendering for the server, some judge is not perfect

Can there be improvements, or temporary solutions? Thank you!

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c182">#c182</a>)</em></sub></div>