kotosha-real

 {
     "name": "static-vs-dynamically-updated-text-in-your-app",
     "private": true,
     "version": "0.0.0",
     "type": "module",
     "scripts": {
         "dev": "node server",
         "build": "npm run build:client && npm run build:server",
         "build:client": "vite build --ssrManifest --outDir dist/client",
         "build:server": "vite build --ssr src/entry-server.tsx --outDir dist/server",

kotosha-real

 import React from 'react'
 import ReactDOMServer from 'react-dom/server'
 import { IntlProvider } from 'react-intl'
 import App from './App'
-import messages from '../static/messages.json'
 
-export function render() {
+export function render(_url: string, _ssrManifest: unknown, appData: { messages: Record<string, any> }) {
     const head = `<script>
     window.__data__ = window.__data__ || {}

kotosha-real

 import './index.css'
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { IntlProvider } from 'react-intl'
 import App from './App'
-import messages from '../static/messages.json'
+
+const messages = window.__data__?.messages || {}
 
 ReactDOM.hydrateRoot(

kotosha-real

 import { useState } from 'react'
+import { useIntl } from 'react-intl'
 import reactLogo from './assets/react.svg'
 import './App.css'
 
 function App() {
     const [count, setCount] = useState(0)
 
+    const intl = useIntl()
+

kotosha-real

import React from 'react';

import 'Cards.css';

export const Cards = ({ cards }) => (
  <div className="cards" style={{ paddingBottom: `${Math.max(cards.length, 1)}em` }}>
    {cards.map(({ title, text }, i) => (
      <div className="card" style={{ transform: `translateY(${i}em)`}}>
        <h3 className="card__title">{title}</h3>
        <p className="card__text">{text}</p>

kotosha-real

const cardBlocks = document.querySelectorAll(".cards");

cardBlocks.forEach((cardBlock) => {
  cardBlock.style.paddingBottom = `${Math.max(cardBlock.children.length, 1)}em`;

  Array.from(cardBlock.children).forEach(
    (card, i) => (card.style.transform = `translateY(${i}em)`)
  );
});

kotosha-real

.card {
+  position: sticky;
+  top: 1em;
  padding: 1.5em;
  border-radius: 1em;
  background-color: red;
}