default to server provided sub name

pages/~/index.js

@@ -8,7 +8,6 @@ import { WelcomeBanner } from '../../components/banners'
 import { useQuery } from '@apollo/client'
 import PageLoading from '../../components/page-loading'
 import TerritoryHeader from '../../components/territory-header'
-import { useEffect } from 'react'
 
 export const getServerSideProps = getGetServerSideProps({
   query: SUB_ITEMS,
@@ -23,18 +22,8 @@ export default function Sub ({ ssrData }) {
   if (!data && !ssrData) return <PageLoading />
   const { sub } = data || ssrData
 
-  // basically a client-side redirect to the canonical url
-  useEffect(() => {
-    if (sub?.name && sub?.name !== router.query.sub) {
-      router.replace({
-        pathname: router.pathname,
-        query: { ...router.query, sub: sub.name }
-      }, `/~${sub.name}`)
-    }
-  }, [sub?.name])
-
   return (
-    <Layout sub={variables.sub}>
+    <Layout sub={sub?.name}>
       {sub
         ? <TerritoryHeader sub={sub} />
         : (

pages/~/search.js

@@ -14,8 +14,10 @@ export default function Index ({ ssrData }) {
   const router = useRouter()
   const variables = { ...router.query, includeComments: true }
 
+  const sub = ssrData?.sub?.name || variables.sub
+
   return (
-    <SearchLayout sub={variables.sub}>
+    <SearchLayout sub={sub}>
       {variables.q
         ? <Items
             ssrData={ssrData}

pages/~/top/[type]/[when].js

@@ -20,8 +20,10 @@ export default function Index ({ ssrData }) {
   const router = useRouter()
   const variables = variablesFunc(router.query)
 
+  const sub = ssrData?.sub?.name || variables.sub
+
   return (
-    <Layout sub={variables.sub}>
+    <Layout sub={sub}>
       <TopHeader sub={variables.sub} cat={variables.type} />
       <Items
         ssrData={ssrData}