先列出幾個所有我嘗試過得方法對於其他Richtext element的方法可參考上一篇，此篇只會專注於code-block的render。

在SSR網站去render這樣一個component並不難，但遇到Static Side Generation(靜態生成頁面)就是開始頭痛的時候了。

在使用這三個前，不管你用哪個只要在進入有經改變Code-Block style的頁面後重整一定會出

Hydration failed because the initial UI does not match what was rendered on the server"

:((((((((

)解答也不會解決你的問題，更慘這個問題你網頁build完後run start會完全沒問題，就是你的 CodeBlock不會正常顯示，而再重整一次你的CodeBlock的style才會再次套用，問題是使用者不可能進入你的網頁後在自己發現這個bug然後每次都幫你重整，而直接硬寫一個useEffect來強制重整頁面也絕對是下下策。

在解決這問題前需先了解SPA模式網站常出現的"Hydration"的意思

在我們instantiate一個class成一個新物件的時候，他並不會帶有任何值除了你給他的default value，所謂Hydrate就是"

"，不管是從資料庫還是從你的endpoint，因為Nextjs這種SSG(靜態頁面生成)與SSR交錯的方式很容易造成必須等所有網站的scripts & functionality hooked 才會動作，而那些套用prismjs與highlightjs的codeblock更是會有來不及render的問題

"When css-in-js libraries are not set up for pre-rendering (SSR/SSG) it will often lead to a hydration mismatch."

因此很多時候我們都會寫等待DOM跑完後的判斷式

const [domLoaded, setDomLoaded] = useState(false);
   useEffect(() => {
     setDomLoaded(true);
}, [post]);

確定DOM loaded後才去render此component

{domLoaded && (
      <div className='bg-white shadow-lg rounded-lg lg:p-8 pb-12 mb-8'>
        <div className='relative overflow-hidden'>
          <Image
            src={post.thumbnail.url}
            alt={post.title}
            unoptimized
            priority={true}
            width={125}
            height={75}
            layout='responsive'
            className="object-top rounded-lg"
          />
        </div>
        <div className='px-4 lg:px-0'>
          <div className='flex flex-row-reverse mb-8 w-full'>
            {/*時間*/}
            <div className="font-medium text-gray-700 mt-3">
              <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 inline mr-2 mb-1 text-blue-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
              </svg>
              <span className="align-middle">{moment(post.createdAt).format('YYYY-MM-DD HH:mm')}</span>
            </div>
            {/*頭像*/}
          <Link href={`/intro/`}> 
            <div className='flex mb-4 lg:mb-0 w-full lg:w-auto mr-4 mt-2 cursor-pointer hover:scale-110 ease-in duration-300'>
.......................................................

此時若你直接帶入children進code props 就會報錯

<Highlight {...defaultProps} theme={theme} code={children} language="jsx">{/*這是錯的！*}

str.slice.png

所以又是快樂debug時間，首先一樣先用複製大法直接把錯誤貼到Google，你會看到

"The "slice is not a function" error occurs when the slice() method is called on a value that is not of type string or array" 

也就是說他的 code 參數只接受 plain text,因此又要來開鑿children的內部構造了, console出來能看到

children_structure.png

這邊直接附上我解構的code-block程式碼  (style及其他細節可去我的repo下載下來參考)

code_block: ({ children }) => {
   const code = `${children.props.content[0].text}`.trim();
// console.log(children.props.content[0].text)
return(
  <Highlight {...defaultProps} theme={theme} code={code} language="jsx">
    {({ className, style, tokens, getLineProps, getTokenProps }) => (
      <Pre className={className} style={style}>
        {tokens.map((line, i) => (
          <Line key={i} {...getLineProps({ line, key: i })}>
            <LineNo>{i + 1}</LineNo>
            <LineContent>
              {line.map((token, key) => (
                <span key={key} {...getTokenProps({ token, key })} />
              ))}
            </LineContent>
          </Line>
        ))}
      </Pre>
    )}
  </Highlight>
)},

自己平常在網路上也受惠於很多別人花了數小時甚至數個禮拜才寫出來的解答，所以能反饋給網路上讓大家以後在遇到相同問題後能節省時間，加上自己對這問題的處理印象能更清晰對我來說也是雙贏局面，寫程式一定終究還是會有Google不到的答案，靠自己慢慢摸索慢慢debug雖然很耗神，但能在解決問題的過程中熟悉很多邏輯&了解背後運作的原理，也有點像在leetcode刷的感覺，其實還頗有趣~

Young

你可能還會想看..

文章分類