Questions tagged [hydration]

Hydration is a service provided through Adobe phonegap build that allows for installed applications to be updated over the internet.

More information can be found on their product page http://docs.phonegap.com/phonegap-build/tools/hydration/

143 questions
3
votes
2 answers

React-query + Nextjs using hydration config for SSR doesn't use cached results and always have to wait fetch again

I'm trying to use react-query on my nextjs app with SSR/SSG and tried a lot of tutorials. Took hydration config because it seems better than initialData approach. Following react-query guide: https://react-query.tanstack.com/guides/ssr you just have…
3
votes
0 answers

How to use emotion with nextjs ? Hydration error

Im trying to create a static blog using nextjs. I want to use @emotion/styled to style code blocks but I am running into to some hydration issues. I have created a custom component to style code snippets in my blog. I am using…
revilotom
  • 75
  • 5
3
votes
0 answers

Dynamic Server-Side Rendering with Svelte. How to hydrate it on a client?

Assume we have a web page with the HTML lang attribute set dynamically based on the Accept-language header of the request. The body of the page is also language-specific. What I came up with: require('svelte/register') // Render the body const Body…
Dmitry
  • 1,556
  • 1
  • 14
  • 26
3
votes
1 answer

Doctrine querybuilder with joins - hydrate array

I've noticed a behaviour I've not really encountered with doctrine under symfony 3.3 of late. If I use a querybuilder with some joins, in the result set that I get back, I end up with each table on a new row in the resultant array - For example, if…
Chris Jolley
  • 33
  • 1
  • 4
2
votes
1 answer

Safari browser failing page hydration

Our website uses JS to do partial page hydration to avoid downloading the entire page when navigating within the website. We have been getting reports from Safari browser users that when they click a nav link, they loose all the content (but the…
Tom
  • 2,928
  • 4
  • 28
  • 36
2
votes
1 answer

Why does the project initialized with Remix's Indie stack get the error Hydration failed in Devtools?

When I was learning Remix, I followed the tutorial to initialize a project, but when I opened Devtools, I saw several errors reported on the console. Warning: Did not expect server HTML to contain a
in . Error: Hydration failed because…
Marshall
  • 47
  • 5
2
votes
1 answer

Hydration problem with client-side authentication and computed property in Vue/Nuxt layout

My app (vue/nuxt 3) stores the user authentication state in localStorage. As a consequence it is only available on the client and prerendered pages always show the unauthenticated content. Client will render the authenticated content as soon as it…
some-user
  • 3,888
  • 5
  • 19
  • 43
2
votes
1 answer

Hydration Error when using next-usequerystate with Next JS

I'm running a very simple example listed on the npm page for next-usequerystate itself. Here's the code: import { useQueryState } from 'next-usequerystate' export default () => { const [name, setName] = useQueryState('name') return ( <> …
Vipul Rajan
  • 494
  • 1
  • 5
  • 16
2
votes
1 answer

What to do with hydration error in Next.js? Error: Text content does not match server-rendered HTML

So what to do when client has extra, different info than server? i.e. read something from localStorage, and display it? Of course countent is different. Why this hydration error come? Error: Text content does not match server-rendered HTML. const…
János
  • 32,867
  • 38
  • 193
  • 353
2
votes
2 answers

Next.js Error: Hydration failed because the initial UI does not match what was rendered on the server

Don't know what is causing this error? If I remove the following code, the error doesn't get shown. Why is this part of the code causing this error and how can I resolve it?
Nasem
  • 417
  • 2
  • 7
  • 15
2
votes
0 answers

using `react-select` with `nextjs` causes Hydration Error when `Select` element is filled with value from localStorage

Using NextJS, I have a form which uses react-select's CreatableSelect component with multiselect. This form stores the data from react-hook-forms's state in the localStorage using the following hook: // useLocalStorage import { useMemo, useState }…
Sri
  • 242
  • 3
  • 13
2
votes
1 answer

How to correctly trigger on focus event for server rendered text field in React JS

Sometimes text field component which is rendered from server, does not trigger attached onFocus event handler. Reason being, the text field component which is rendered on server side, is not hydrated on the client side yet and user tries to focus on…
Harish Dhami
  • 1,016
  • 1
  • 7
  • 10
2
votes
0 answers

Nuxt.js force ssr after hydration

Given I had to use a module which calls fs and modifies my asyncData, I would have to implement it in a way that forces it to run on the server. asyncData() { return {foo: 'bar'} }, something() { //what do I use? const…
2
votes
2 answers

Access the component name from a Vue directive

I want to create a custom Vue directive that lets me select components on my page which I want to hydrate. In other words, this is what I want to archive I render my Vue app on the server (ssr) I attach a directive to some components, like…
Lukas
  • 9,752
  • 15
  • 76
  • 120
2
votes
1 answer

Make Doctrine skip fields/columns during INSERT INTO that are read-only

I have a PostgreSQL table t with columns t1, t2, …. I need to filter a collection of the entities before hydrating all objects by Doctrine due to efficiency reasons. However, the Criteria class of Doctrine is too limited, because it must work on the…
user2690527
  • 1,729
  • 1
  • 22
  • 38
1
2
3
9 10