frontend/server.ssr.test.mjs

@@ -66,6 +66,9 @@ const responseFor = url => {
   if (path === '/gekanator/posts') return { posts: [post (locale)] }
   if (path === '/gekanator/questions') return { questions: [] }
   if (path === '/posts/1') return post (locale)
+  if (path === '/posts/2')
+    return { ...post (locale), id: 2,
+      url: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ' }
   if (path === '/tags') return { tags: [tag (locale)], count: 1 }
   if (path === '/tags/1' || path.startsWith ('/tags/name/')) return tag (locale)
   if (path === '/tags/1/deerjikists') return { tag: tag (locale), deerjikists: [] }
@@ -333,6 +336,22 @@ test ('every canonical screen route returns page HTML without JavaScript', async
   }
 })
 
+test ('YouTube posts return HTTP 200 with the embed rendered by SSR', async t => {
+  for (const locale of ['ja', 'ain-Kana']) {
+    await t.test (locale, async () => {
+      const response = await fetch (`${httpOrigin}/${locale}/posts/2`)
+      assert.equal (response.status, 200)
+      const html = await response.text ()
+      assert.match (html, new RegExp (`<html lang="${locale}"`))
+      assert.match (html, new RegExp (`SSR post ${locale}`))
+      assert.match (html, /https:\/\/www\.youtube\.com\/watch\?v=dQw4w9WgXcQ/)
+      // react-youtube renders its player container before mounting the iframe.
+      assert.match (html, /<div class=""><div id="" class=""><\/div><\/div>/)
+      assert.doesNotMatch (html, /Switched to client rendering|template id="B:/)
+    })
+  }
+})
+
 test ('parallel localized requests keep list data isolated', async () => {
   const start = requests.length
   const pages = await Promise.all (['ja', 'ain-Kana', 'ja', 'ain-Kana'].map (locale =>

frontend/src/config.sample.ts

@@ -1,5 +1,4 @@
 // frontend/src/config.ts
-const config = {
-  API_BASE_URL: '/api' }
+const config = { API_BASE_URL: '/api' }
 
 export const API_BASE_URL = config.API_BASE_URL

frontend/vite.config.ts

@@ -30,7 +30,7 @@ export default defineConfig ({
 	} }, helpAssets (), mdxPlugin, react ()],
     resolve:  { alias: { '@': path.resolve (__dirname, './src') } },
     ssr:      { noExternal: [
-	'react-helmet-async', 'react-markdown-editor-lite', 'eventemitter3'] },
+	'react-helmet-async', 'react-markdown-editor-lite', 'react-youtube', 'eventemitter3'] },
     server:   { host:         true,
 		port:         5173,
 		strictPort:   true,