[Bug]: Using `setPageProps` causes rendering mismatch when using with ampersands

[ryanwalters]

Summary

When using setPageProp in middleware, the response appears to become HTML encoded on the client side but not on the server, causing a Error: Text content does not match server-rendered HTML.

This issue was seen on both Mac OS and Windows, Chrome, Edge, Firefox.

Steps to reproduce

1. Pull down and run the sample repo
2. Go to http://localhost:8888

Expected result A page displaying Some plain text & an ampersand!

Actual result A page displaying Some plain text & an ampersand! and a Text content does not match server-rendered HTML. error.

Warning: Text content did not match. Server: "Some plain text & an ampersand!" Client: "Some plain text & an ampersand!"

Please note that commenting out response.setPageProp fixes the issue.

A link to a reproduction repository

https://github.com/britannica/next-sandbox

Next Runtime version

@netlify/[email protected], @netlify/plugin-nextjs@latest (whatever is pulled down when configuring netlify.toml)

More information about your build

• [ ] I am building using the CLI
• [ ] I am building using file-based configuration (netlify.toml)

What OS are you using?

No response

Your netlify.toml file

`netlify.toml`

[build]
    command = "npm run build"
    publish = ".next"

[build.environment]
    NEXT_USE_NETLIFY_EDGE = "true"

[[plugins]]
    package = "@netlify/plugin-nextjs"

Your public/_redirects file

`_redirects`

# Paste content of your `_redirects` file here

Your next.config.js file

`next.config.js`

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

Builds logs (or link to your logs)

Build logs

◈ Netlify Dev ◈
◈ Injected netlify.toml file env var: NEXT_USE_NETLIFY_EDGE
◈ Setting up local development server
​
────────────────────────────────────────────────────────────────
  Netlify Build
────────────────────────────────────────────────────────────────
​
> Version
  @netlify/build 27.18.3
​
> Flags
  {}
​
> Current directory
  H:\Projects\next-sandbox
​
> Config file
  H:\Projects\next-sandbox\netlify.toml
​
> Context
  dev
​
> Using Next.js Runtime - v4.23.1
​
────────────────────────────────────────────────────────────────
  1. @netlify/plugin-nextjs (onPreDev event)
────────────────────────────────────────────────────────────────
​
Patching H:\Projects\next-sandbox\node_modules\next\dist\server\base-serv
er.js
Done
Patching H:\Projects\next-sandbox\node_modules\next\dist\server\next-serv
er.js
Done
​
(@netlify/plugin-nextjs onPreDev completed in 52ms)
​
────────────────────────────────────────────────────────────────
  2. Run command for local development
────────────────────────────────────────────────────────────────
​
◈ Starting Netlify Dev with Next.js

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000       
√ Waiting for framework port 3000. This can be configured using the 'targ
etPort' property in the netlify.toml
​
(dev.command completed in 1s)

   ┌─────────────────────────────────────────────────┐
   │                                                 │
   │   ◈ Server now ready on http://localhost:8888   │
   │                                                 │
   └─────────────────────────────────────────────────┘

◈ Loaded edge function next-dev

Function logs

Function logs

# Paste logs here

.next JSON files

generated .next JSON files

// .next/build-manifest.json
{
  "polyfillFiles": [
    "static/chunks/polyfills.js"
  ],
  "devFiles": [
    "static/chunks/react-refresh.js"
  ],
  "ampDevFiles": [
    "static/chunks/webpack.js",
    "static/chunks/amp.js"
  ],
  "lowPriorityFiles": [
    "static/development/_buildManifest.js",
    "static/development/_ssgManifest.js"
  ],
  "rootMainFiles": [],
  "pages": {
    "/": [
      "static/chunks/webpack.js",
      "static/chunks/main.js",
      "static/chunks/pages/index.js"
    ],
    "/_app": [
      "static/chunks/webpack.js",
      "static/chunks/main.js",
      "static/chunks/pages/_app.js"
    ],
    "/_error": [
      "static/chunks/webpack.js",
      "static/chunks/main.js",
      "static/chunks/pages/_error.js"
    ]
  },
  "ampFirstPages": []
}

// .next/react-loadable-manifest.json
{}

// .next/server/middleware-manifest.json
{
  "sortedMiddleware": [],
  "middleware": {},
  "functions": {},
  "version": 2
}

// .next/server/pages-manifest.json
{
  "/_app": "pages/_app.js",
  "/_error": "pages/_error.js",
  "/_document": "pages/_document.js",
  "/": "pages/index.js"
}

[sarahetter]

@ericapisani I believe this is related to the middleware fixes you're making?

[ericapisani]

@sarahetter This might have a similar root cause (missing data due to the middleware no longer running on the server) but this won't have been fixed by the changes that I had made as part of this PR. Would need to take a closer look at this