notes

Extracting Image Dimensions from Remote Sources2023. 5. 25.

Before

  • til을 위해 repo issues를 cms로 쓰고 있었고,
  • issue body render를 위해 github api reponse 중 bodyHTMLdangerously... 에 넣어주고 있었음.
  • 근데 이러면 next가 해주는 이것저것이 아까우므로,
  • api response 중 body(markdown string)을 mdx renderer에 넘겨서 써야겠다고 생각.

Issues

How?

  • probe-image-size라는 라이브러리가 있고,
  • mdx renderer option의 component 설정시 <img /> -> <Image />로 replace 하면서 요걸 사용해서 width/height 정보를 넘겨주면 됨.
  • 코드는 대충 이런식:
    import probe from "probe-image-size"
    // ...
    const components: MDXRemoteProps["components"] = {
      // ...
      // @ts-expect-error <- ts는 아직 async 컴포넌트를 모르지만 우리는 rsc 세계로 넘어왔으므로 ok.
      img: async ({ src, alt }) => {
        if (!src) return null
    
        const { width, height } = await probe(src ?? "")
        //                        ^^^^^ rsc ftw...
    
        if (!width || !height) return null
    
        return <Image src={src} alt={alt ?? ""} width={width} height={height} />
      },
      // ...
    }
    // ...
    import probe from "probe-image-size"
    // ...
    const components: MDXRemoteProps["components"] = {
      // ...
      // @ts-expect-error <- ts는 아직 async 컴포넌트를 모르지만 우리는 rsc 세계로 넘어왔으므로 ok.
      img: async ({ src, alt }) => {
        if (!src) return null
    
        const { width, height } = await probe(src ?? "")
        //                        ^^^^^ rsc ftw...
    
        if (!width || !height) return null
    
        return <Image src={src} alt={alt ?? ""} width={width} height={height} />
      },
      // ...
    }
    // ...

Result

최종 렌더된 이미지의 url을 보면

Screenshot 2023-05-25 at 17 18 40

next가 잘 처리하고 있음을 알 수 있음.

Conclusion

RSC는 대박이다...

Tags