Add server-side hydration of initial config+status. Closes #1964

build/web/bundleWeb.sh

@@ -17,7 +17,7 @@ echo "Building owncast web..."
 rm -rf .next
 (node_modules/.bin/next build && node_modules/.bin/next export) | grep info
 
-echo "Copying admin to project directory..."
+echo "Copying web project to dist directory..."
 
 # Remove the old one
 rm -rf ../static/web

controllers/config.go

@@ -61,6 +61,14 @@ func GetWebConfig(w http.ResponseWriter, r *http.Request) {
 	middleware.DisableCache(w)
 	w.Header().Set("Content-Type", "application/json")
 
+	configuration := getConfigResponse()
+
+	if err := json.NewEncoder(w).Encode(configuration); err != nil {
+		BadRequestHandler(w, err)
+	}
+}
+
+func getConfigResponse() webConfigResponse {
 	pageContent := utils.RenderPageContentMarkdown(data.GetExtraPageBodyContent())
 	socialHandles := data.GetSocialHandles()
 	for i, handle := range socialHandles {
@@ -106,7 +114,7 @@ func GetWebConfig(w http.ResponseWriter, r *http.Request) {
 		IndieAuthEnabled: data.GetServerURL() != "",
 	}
 
-	configuration := webConfigResponse{
+	return webConfigResponse{
 		Name:                 data.GetServerName(),
 		Summary:              serverSummary,
 		OfflineMessage:       data.GetCustomOfflineMessage(),
@@ -126,10 +134,6 @@ func GetWebConfig(w http.ResponseWriter, r *http.Request) {
 		Notifications:        notificationsResponse,
 		Authentication:       authenticationResponse,
 	}
-
-	if err := json.NewEncoder(w).Encode(configuration); err != nil {
-		BadRequestHandler(w, err)
-	}
 }
 
 // GetAllSocialPlatforms will return a list of all social platform types.

controllers/index.go

@@ -1,10 +1,14 @@
 package controllers
 
 import (
+	"encoding/json"
 	"net/http"
 	"path/filepath"
+	"strings"
 
+	"github.com/owncast/owncast/core/data"
 	"github.com/owncast/owncast/router/middleware"
+	"github.com/owncast/owncast/static"
 	"github.com/owncast/owncast/utils"
 )
 
@@ -19,6 +23,11 @@ func IndexHandler(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	if isIndexRequest {
+		renderIndexHtml(w)
+		return
+	}
+
 	// Set a cache control max-age header
 	middleware.SetCachingHeaders(w, r)
 
@@ -27,3 +36,53 @@ func IndexHandler(w http.ResponseWriter, r *http.Request) {
 
 	serveWeb(w, r)
 }
+
+func renderIndexHtml(w http.ResponseWriter) {
+	type serverSideContent struct {
+		Name             string
+		Summary          string
+		RequestedURL     string
+		TagsString       string
+		ThumbnailURL     string
+		Thumbnail        string
+		Image            string
+		StatusJSON       string
+		ServerConfigJSON string
+	}
+
+	status := getStatusResponse()
+	sb, err := json.Marshal(status)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	config := getConfigResponse()
+	cb, err := json.Marshal(config)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	content := serverSideContent{
+		Name:             data.GetServerName(),
+		Summary:          data.GetServerSummary(),
+		RequestedURL:     data.GetServerURL(),
+		TagsString:       strings.Join(data.GetServerMetadataTags(), ","),
+		ThumbnailURL:     "/thumbnail",
+		Thumbnail:        "/thumbnail",
+		Image:            "/logo/external",
+		StatusJSON:       string(sb),
+		ServerConfigJSON: string(cb),
+	}
+
+	index, err := static.GetWebIndexTemplate()
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+		return
+	}
+
+	if err := index.Execute(w, content); err != nil {
+		http.Error(w, err.Error(), http.StatusInternalServerError)
+	}
+}

controllers/status.go

@@ -13,6 +13,17 @@ import (
 
 // GetStatus gets the status of the server.
 func GetStatus(w http.ResponseWriter, r *http.Request) {
+	response := getStatusResponse()
+
+	w.Header().Set("Content-Type", "application/json")
+	middleware.DisableCache(w)
+
+	if err := json.NewEncoder(w).Encode(response); err != nil {
+		InternalErrorHandler(w, err)
+	}
+}
+
+func getStatusResponse() webStatusResponse {
 	status := core.GetStatus()
 	response := webStatusResponse{
 		Online:             status.Online,
@@ -22,17 +33,10 @@ func GetStatus(w http.ResponseWriter, r *http.Request) {
 		VersionNumber:      status.VersionNumber,
 		StreamTitle:        status.StreamTitle,
 	}
-
 	if !data.GetHideViewerCount() {
 		response.ViewerCount = status.ViewerCount
 	}
-
-	w.Header().Set("Content-Type", "application/json")
-	middleware.DisableCache(w)
-
-	if err := json.NewEncoder(w).Encode(response); err != nil {
-		InternalErrorHandler(w, err)
-	}
+	return response
 }
 
 type webStatusResponse struct {

web/components/layouts/Main.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-danger */
+/* eslint-disable react/no-unescaped-entities */
 import { Layout } from 'antd';
 import { useRecoilValue } from 'recoil';
 import Head from 'next/head';
@@ -27,6 +29,11 @@ export const Main: FC = () => {
     setupNoLinkReferrer(layoutRef.current);
   }, []);
 
+  const hydrationScript = `
+	window.statusHydration = {{.StatusJSON}};
+	window.configHydration = {{.ServerConfigJSON}};
+	`;
+
   return (
     <>
       <Head>
@@ -86,6 +93,7 @@ export const Main: FC = () => {
         <meta name="theme-color" content="#ffffff" />
 
         <style>{customStyles}</style>
+        <script dangerouslySetInnerHTML={{ __html: hydrationScript }} />
       </Head>
 
       <ClientConfigStore />

web/components/stores/ClientConfigStore.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { FC, useEffect } from 'react';
 import { atom, selector, useRecoilState, useSetRecoilState } from 'recoil';
 import { useMachine } from '@xstate/react';
 import { makeEmptyClientConfig, ClientConfig } from '../../interfaces/client-config.model';
@@ -170,7 +170,7 @@ function mergeMeta(meta) {
   }, {});
 }
 
-export const ClientConfigStore = () => {
+export const ClientConfigStore: FC = () => {
   const [appState, appStateSend, appStateService] = useMachine(appStateModel);
 
   const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
@@ -343,6 +343,29 @@ export const ClientConfigStore = () => {
     }
   };
 
+  // Read the config and status on initial load from a JSON string that lives
+  // in window. This is placed there server-side and allows for fast initial
+  // load times because we don't have to wait for the API calls to complete.
+  useEffect(() => {
+    try {
+      if ((window as any).configHydration) {
+        const config = JSON.parse((window as any).configHydration);
+        setClientConfig(config);
+      }
+    } catch (e) {
+      // console.error('Error parsing config hydration', e);
+    }
+
+    try {
+      if ((window as any).statusHydration) {
+        const status = JSON.parse((window as any).statusHydration);
+        setServerStatus(status);
+      }
+    } catch (e) {
+      // console.error('error parsing status hydration', e);
+    }
+  }, []);
+
   useEffect(() => {
     updateClientConfig();
     handleUserRegistration();