Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bug: Next.js 13 custom server + SSR + Hydration #4389

Closed
3 tasks done
mbulfair opened this issue May 15, 2023 · 7 comments
Closed
3 tasks done

bug: Next.js 13 custom server + SSR + Hydration #4389

mbulfair opened this issue May 15, 2023 · 7 comments
Labels
triage

Comments

@mbulfair
Copy link

Prerequisites

Stencil Version

3.2.2

Current Behavior

This is a extension from the Stencil Discord thread, where a issue was asked to log an issue that can replicate the issues my team is seeing while trying to use NextJS 13.4+ with Stencil 3.3.2 and hydrate renderToString with a custom server to provide the server with a hydrated document.

Example screenshot

image

Expected Behavior

I expect the server and client to be in sync from an initial render, with the expectation that fetching and interactive elements won't be available

System Info

System: node 16.19.0
    Platform: darwin (22.2.0)
   CPU Model: Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz (12 cpus)
       Build: 1682947516
     Stencil: 3.2.2 🏒
  TypeScript: 4.9.5
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.17.1

Steps to Reproduce

The repo linked is a NX/Lerna repo

Note: Created quickly so it's not optimized for ease of use

  • npm install
  • npx lerna bootstrap
  • npx nx run @matt/stencil-components:build
  • npx nx run @matt/react-library:build
  • Non Custom Server - npx nx run next-13-demo:dev - Warning with extra attribute
  • Custom Server - npx nx run next-13-demo:dev:custom - Hydration Mismatch Error - Breaking

Code Reproduction URL

https://github.com/mbulfair/nextjs13-ssr-hydration

Additional Information

Discord Thread - https://discord.com/channels/520266681499779082/1107698585002319883
@ionitron-bot ionitron-bot bot added the triage label May 15, 2023
@johnjenkins
Copy link
Contributor

👋 took the liberty of forking the repro - https://github.com/johnjenkins/nextjs13-ssr-hydration - applied #2938.

Seems to be fixed. I'd love to get that PR merged one day.
Appreciate it would be quite the undertaking at this stage but I'm still around and willing to make it happen :)

@mayerraphael
Copy link

mayerraphael commented May 24, 2023 •
edited
Loading

We have full SSR and Stencil/NextJS running by using JohnJenkins 2.23 build with the integrated PR (for most of the slot problems) and we hydrate Stencil before NextJS, by putting defineCustomElements in a beforeInteractive Script or a plain old <script> with dangerouslySetInnerHTML in the _document page.

This requires you to provide the component library via an asset in the server.js. (see https://github.com/mayerraphael/stencil-ssr-bug/blob/main/my-app/server.js#LL23C1-L23C91)

Also be sure to set <body style={{ display: "block" }}> as NextJS has the body hidden until NextJS is initialized in dev mode, causing problems if components use componentDidLoad and calculate some height/width there.

Here is a link to a recent repo of mine: https://github.com/mayerraphael/stencil-ssr-bug/blob/main/my-app/pages/_document.tsx (it is missing the body fix, as this caused the problems we wanted to show with this repo)

https://nextjs.org/docs/pages/building-your-application/optimizing/scripts#strategy

The PR @johnjenkins named is so vital for us. SSR is so buggy ATM without this PR that it is just straight unusable.

@gabrielleacuba
Copy link

gabrielleacuba commented May 24, 2023 •
edited
Loading

Can any of you help me? I have my company’s design system that is using the stencil and they work perfectly in the next version that uses the pages/ folder, but trying to use it in the app/ folder in the new 13.4 version the components are loaded but the style is not

If I set the defineCustomElements in page layout the component appears and disappears soon after, but in html it stays but its style doesn’t!

Screen Shot 2023-05-24 at 18 21 26

app/page.tsx

"use client";
import { MyComponent } from "@my-scope/my-stencil-lib";
import { useEffect } from "react";

export default function Home() {
  useEffect(() => {
    import("@my-scope/my-stencil-lib").then(
      ({ defineCustomElements }) => {
        defineCustomElements();
      }
    );
  }, []);
  return <MyComponent variant="cta">Click me</MyComponent>;
}

next.config.js 

/** @type {import('next').NextConfig} */
const nextConfig = {
  transpilePackages: ["@my-scope/my-stencil-lib"],
};

module.exports = nextConfig;

@TheNinza
Copy link

TheNinza commented Jun 6, 2023

I am facing the same issue @gabrielleacuba . Any updates on this since you posted it?

@johnjenkins
Copy link
Contributor

@gabrielleacuba & @TheNinza - not really to do with SSR, but your problems are due to an issue with Nextjs (not Stencil) in that it removes any 3rd party tag injected into the head (e.g. analytics etc) vercel/next.js#11012

It was fixed in April via an experimental flag: vercel/next.js#47938. Just add:

experimental: {
  strictNextHead: true,
}

To you next.config

@johnjenkins
Copy link
Contributor

johnjenkins commented Jun 8, 2023 •
edited
Loading

@mayerraphael in case you weren't aware - the PR has been picked up in a dev version of Stencil (3.3.0-dev.1685496483.a311f36).
Full coverage - https://discord.com/channels/520266681499779082/1108109881870925875/1108109881870925875

@deleonio deleonio mentioned this issue Dec 11, 2023
Open
@baseplate-admin baseplate-admin mentioned this issue May 25, 2024
Closed
@christian-bromann
Copy link
Member

closing in favor of #5831

@christian-bromann christian-bromann mentioned this issue Jun 14, 2024
Open
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
triage
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@christian-bromann @johnjenkins @mbulfair @mayerraphael @gabrielleacuba @TheNinza