The Server Side Rendering in (Vue+Express) faltered due to inconsistencies in hydration

While browsing Vue's official website, I came across a concise example demonstrating how to implement server-side rendering (SSR) using Vue.

(

https://stackblitz.com/edit/vue-ssr-example-qaztqn?file=package.json
)

Intrigued by this example, I decided to replicate it on my local machine and was able to run it successfully.

However, when I attempted to bundle Vue locally using Vite, I encountered an error related to hydration mismatch:

index.0977acf5.js:2980 Hydration completed but contains mismatches.

Prior to my modifications, the original example on the Vue site imported Vue from a CDN in its index.html. My only alteration was to package Vue locally and reference the entire bundled JS file instead.

I have shared my unsuccessful attempt on GitHub: 

https://github.com/yangjiang3973/vue-ssr-demo

If anyone could provide insight into why this hydration error occurred, I would greatly appreciate it!

Thank you in advance!

javascriptvue.js

Answer №1

Incorrect hydration node matching can occur when there are issues with your HTML markup

<p>
  <p></p>
</p>

or

<span>
  <p></p>
</span>

In the scenario mentioned above, the nesting is not allowed, you cannot nest p tags within another p tag, or p tag within a span tag. The browser automatically corrects this issue, causing discrepancies between the SSR-rendered template and the final output in the browser.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering a Protractor Page Objects glitch

I'm currently working on developing an angularjs protractor e2e test using the page objects pattern. However, I am running into some issues when trying to convert my script into a page object. Below is a snippet from my conf.js file: // conf.js expo ...

javascriptangularjsjasminepageobjects

Is there a way to automatically import all images from a folder in VUE?

I'm attempting to automatically import all images from a folder. Here is what I've tried under // tested: <template> <p>classical art</p> <img v-for="image in images" :key="image" :src="image.url& ...

javascriptvue.jsvue-cli

ASP.NET AJAX UpdatePanel - preventing postback in InitializeRequest will not reset back to enabled state

In my ASP.NET AJAX UpdatePanel, there is a submit button with custom javascript validation that sets a global flag called _cancelGeneralSettingsUpdate based on the validation results. Everything works fine except when an invalid value is entered, correcte ...

javascriptasp.netajaxajaxcontroltoolkit

Retrieving historical data from a MySQL database to display in a div element

My main page features a button that opens a popup. Upon closing the popup, a script is triggered to call a PHP file for selecting data from the database. This selected data is then appended to a specific div within the main page: if (win.closed !== false ...

javascriptphpjquery

Implementing i18n in NextJS with a focus on maximizing SEO performance

My task was to implement internationalization (i18n) for our company website. Currently, we are using Netlify with @netlify/plugin-nextjs, and I encountered an issue when trying to submit a PR. An error popped up stating: Error: i18n support is not compati ...

javascriptreactjsnext.jsinternationalizationvercel

The use of an Authorization header is not compatible with HTTP GET requests

I recently incorporated VueSession into my project to handle user sessions. One of the components in my application is a login form that communicates with my backend (Django) to obtain a JWT token. However, I encountered an issue where although the login p ...

javascriptvue.jsvue-resource

Parameters for MongoDB search queries

I am currently working with a MongoDB query on a specific collection. Here is the structure of the query: common.db.collection('vb.vbStats').find({uid:uid, "vbs.vbNID":vbNID}, {"vbs.$":1}).toArray(function(err, result) {....} The collection I a ...

javascriptnode.jsmongodbexpress

What other intentions am I forgetting?

Encountering an error regarding missing intents but unable to determine which intents are missing. Various attempts have been made to rectify the issue without success. What specific element is absent here? The following code snippet represents only a po ...

javascriptnode.jsdiscorddiscord.js

Unable to get knockout sorting to function properly

I have been working on organizing my grid and here is the code that I have so far: ko.moveInGrid = { // Creating a view model class for grid population viewModel : function(config) { this.data = config.data; this.currentPageIndex = ...

javascriptsortingknockout.js

Retrieve the attribute of the clicked element by utilizing the on click event handler

Within my HTML, there is a page displaying approximately 25 thumbnails, each with a like button in this specific format: <input type="button" class="btn btn-primary btn-small" id="likeBtn" data-id="545206032225604" value="Like"> It's important ...

javascriptjqueryfacebook

Importing the Monday view in React - A step-by-step guide

I am interested in incorporating one of my Monday boards into my React component. Here is a snippet of the code: import React from 'react' import useI18n from 'hooks/useI18n' import Page from 'components/layout/Page' const Ro ...

javascriptreactjsnpm

Vue - Triggering parent method based on child selection

I want to trigger a parent method when the selection in a dropdown item changes. Here's how I envision it: Parent.vue <template> <child ref="someRef"> </template> ... methods: { doSomething() { // use someRef.selectedItems ...

vue.js

Uploading directly to AWS S3: SignatureDoesNotMatch error specifically for Internet Explorer users

My process involves using Amazon Web Service S3 for uploading and storing files. I create a pre-signed URL using the AWS SDK for Node.js on the server-side to enable direct file uploads from the browser through this signature URL. The Process On the serv ...

javascriptajaxnode.jsinternet-exploreramazon-s3

Setting variables in AngularJS services without encountering JavaScript undefined errors

After developing an AngularJS module, I attempted to link a service and use it to share variables across the application. While most things are functioning properly, I encountered an issue when trying to set submenu[1] to an object. The error message sta ...

javascripthtmlangularjsundefinedtypeerror

Guide on populating a textbox with values through Ajax or Jquery

Consider the scenario where there are three textboxes. The first textbox requires an ID or number (which serves as the primary key in a table). Upon entering the ID, the semester and branch fields should be automatically filled using that ID. All three fie ...

phpjavascriptjquerymysqlajax

One key distinction lies in the comparison between axios and the this.$axios method

Currently, I am working with Nuxt and Gridsome frameworks which are both based on Vue. During my development process, I came across something intriguing. When I implemented the following code: <script> import axios from 'axios'; . ...

laravelvue.jsaxios

Customize the URL path in Next.JS according to the user's location

My Next JS website is hosted on the domain abc.com. I would like the site to automatically detect a visitor's location, retrieve their country code, and then redirect them to abc.com/country_code. ...

javascriptreactjsnext.js

What is the best way to establish default values for an array containing an undetermined amount of objects?

Understanding how to set default values for an object is pretty straightforward: store.currentUser = { username: '' } And updating these values can be done like so: store.getCurrentUser = () => { const currentUser = Parse.User.current() ...

javascriptarrays

Manipulating textbox values in Vue.js within Laravel applications

I'm having some trouble setting the value of a textbox using vuejs The @{{ message }} syntax seems to work fine in the body or within a paragraph tag. However, when I try it like this: <input type="text" name="column_name" v-model="reverseMessag ...

formsmodelsvue.js

Error encountered when attempting to install a new package by a composer

Dealing with macOS, Laravel, and Vue, while my partner works on Windows and updates the repository by installing DomPDF. However, whenever I attempt a composer update or install, I encounter the following error: Your requirements could not be resolved to ...

laravelmacosvue.jscomposer-php