diff --git a/packages/nreact/src/block.tsx b/packages/nreact/src/block.tsx
index 54bf8043..a04930a8 100644
--- a/packages/nreact/src/block.tsx
+++ b/packages/nreact/src/block.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import {
diff --git a/packages/nreact/src/components/asset-wrapper.tsx b/packages/nreact/src/components/asset-wrapper.tsx
index 3d05367e..a499f1a6 100644
--- a/packages/nreact/src/components/asset-wrapper.tsx
+++ b/packages/nreact/src/components/asset-wrapper.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { BaseContentBlock, Block } from '@texonom/ntypes'
diff --git a/packages/nreact/src/components/asset.tsx b/packages/nreact/src/components/asset.tsx
index f08b3ee3..7fb5c55a 100644
--- a/packages/nreact/src/components/asset.tsx
+++ b/packages/nreact/src/components/asset.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { BaseContentBlock, Block } from '@texonom/ntypes'
diff --git a/packages/nreact/src/components/audio.tsx b/packages/nreact/src/components/audio.tsx
index ae2412b1..60b80a47 100644
--- a/packages/nreact/src/components/audio.tsx
+++ b/packages/nreact/src/components/audio.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { AudioBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/components/checkbox.tsx b/packages/nreact/src/components/checkbox.tsx
index d29e6dae..7ab1ad31 100644
--- a/packages/nreact/src/components/checkbox.tsx
+++ b/packages/nreact/src/components/checkbox.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import CheckIcon from '../icons/check'
diff --git a/packages/nreact/src/components/eoi.tsx b/packages/nreact/src/components/eoi.tsx
index 3579d417..c4139538 100644
--- a/packages/nreact/src/components/eoi.tsx
+++ b/packages/nreact/src/components/eoi.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { Block } from '@texonom/ntypes'
diff --git a/packages/nreact/src/components/file.tsx b/packages/nreact/src/components/file.tsx
index 208c5f3f..b67b62bd 100644
--- a/packages/nreact/src/components/file.tsx
+++ b/packages/nreact/src/components/file.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { FileBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/components/google-drive.tsx b/packages/nreact/src/components/google-drive.tsx
index bac9257a..dff8a4ac 100644
--- a/packages/nreact/src/components/google-drive.tsx
+++ b/packages/nreact/src/components/google-drive.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { GoogleDriveBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/components/graceful-image.tsx b/packages/nreact/src/components/graceful-image.tsx
index 463f574c..5a625c5f 100644
--- a/packages/nreact/src/components/graceful-image.tsx
+++ b/packages/nreact/src/components/graceful-image.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { Img, ImgProps } from 'react-image'
diff --git a/packages/nreact/src/components/lazy-image.tsx b/packages/nreact/src/components/lazy-image.tsx
index 9f191a29..42b34fad 100644
--- a/packages/nreact/src/components/lazy-image.tsx
+++ b/packages/nreact/src/components/lazy-image.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { normalizeUrl } from '@texonom/nutils'
diff --git a/packages/nreact/src/components/lite-youtube-embed.tsx b/packages/nreact/src/components/lite-youtube-embed.tsx
index 4d0b8eeb..88a30845 100644
--- a/packages/nreact/src/components/lite-youtube-embed.tsx
+++ b/packages/nreact/src/components/lite-youtube-embed.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 const qs = (params: Record<string, string>) => {
diff --git a/packages/nreact/src/components/page-icon.tsx b/packages/nreact/src/components/page-icon.tsx
index f9f8e65f..68a8e5b3 100644
--- a/packages/nreact/src/components/page-icon.tsx
+++ b/packages/nreact/src/components/page-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { Block, CalloutBlock, PageBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/components/page-title.tsx b/packages/nreact/src/components/page-title.tsx
index e01bc004..7f0cb865 100644
--- a/packages/nreact/src/components/page-title.tsx
+++ b/packages/nreact/src/components/page-title.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { Block, Decoration } from '@texonom/ntypes'
diff --git a/packages/nreact/src/components/search-dialog.tsx b/packages/nreact/src/components/search-dialog.tsx
index 646ff3e1..38f1b97e 100644
--- a/packages/nreact/src/components/search-dialog.tsx
+++ b/packages/nreact/src/components/search-dialog.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 import { getBlockParentPage, getBlockTitle } from '@texonom/nutils'
 
diff --git a/packages/nreact/src/components/sync-pointer-block.tsx b/packages/nreact/src/components/sync-pointer-block.tsx
index cf0512cf..2a336cc0 100644
--- a/packages/nreact/src/components/sync-pointer-block.tsx
+++ b/packages/nreact/src/components/sync-pointer-block.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { NotionBlockRenderer } from '../renderer'
diff --git a/packages/nreact/src/components/text.tsx b/packages/nreact/src/components/text.tsx
index 9bb33ce6..30abaec3 100644
--- a/packages/nreact/src/components/text.tsx
+++ b/packages/nreact/src/components/text.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { parsePageId } from '@texonom/nutils'
diff --git a/packages/nreact/src/context.tsx b/packages/nreact/src/context.tsx
index 34c4f5ac..23813938 100644
--- a/packages/nreact/src/context.tsx
+++ b/packages/nreact/src/context.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { defaultMapImageUrl, defaultMapPageUrl } from '@texonom/nutils'
diff --git a/packages/nreact/src/icons/check.tsx b/packages/nreact/src/icons/check.tsx
index 260c0a91..9a2e0318 100644
--- a/packages/nreact/src/icons/check.tsx
+++ b/packages/nreact/src/icons/check.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgCheck(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/chevron-down-icon.tsx b/packages/nreact/src/icons/chevron-down-icon.tsx
index 3c620079..dd286e30 100644
--- a/packages/nreact/src/icons/chevron-down-icon.tsx
+++ b/packages/nreact/src/icons/chevron-down-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 export const ChevronDownIcon = props => {
diff --git a/packages/nreact/src/icons/clear-icon.tsx b/packages/nreact/src/icons/clear-icon.tsx
index 9b7d1a17..18345ba1 100644
--- a/packages/nreact/src/icons/clear-icon.tsx
+++ b/packages/nreact/src/icons/clear-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 export const ClearIcon = props => {
diff --git a/packages/nreact/src/icons/collection-view-board.tsx b/packages/nreact/src/icons/collection-view-board.tsx
index 17ff3557..dbb55a62 100644
--- a/packages/nreact/src/icons/collection-view-board.tsx
+++ b/packages/nreact/src/icons/collection-view-board.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgCollectionViewBoard(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/collection-view-calendar.tsx b/packages/nreact/src/icons/collection-view-calendar.tsx
index f5675429..ff418060 100644
--- a/packages/nreact/src/icons/collection-view-calendar.tsx
+++ b/packages/nreact/src/icons/collection-view-calendar.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgCollectionViewCalendar(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/collection-view-gallery.tsx b/packages/nreact/src/icons/collection-view-gallery.tsx
index ebabd8fc..95d0c59f 100644
--- a/packages/nreact/src/icons/collection-view-gallery.tsx
+++ b/packages/nreact/src/icons/collection-view-gallery.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgCollectionViewGallery(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/collection-view-icon.tsx b/packages/nreact/src/icons/collection-view-icon.tsx
index 9c80d8ed..cd900b8c 100644
--- a/packages/nreact/src/icons/collection-view-icon.tsx
+++ b/packages/nreact/src/icons/collection-view-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { CollectionViewType } from '@texonom/ntypes'
diff --git a/packages/nreact/src/icons/collection-view-list.tsx b/packages/nreact/src/icons/collection-view-list.tsx
index c47c7543..6bc8f015 100644
--- a/packages/nreact/src/icons/collection-view-list.tsx
+++ b/packages/nreact/src/icons/collection-view-list.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgCollectionViewList(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/collection-view-table.tsx b/packages/nreact/src/icons/collection-view-table.tsx
index 81766407..10450537 100644
--- a/packages/nreact/src/icons/collection-view-table.tsx
+++ b/packages/nreact/src/icons/collection-view-table.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgCollectionViewTable(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/copy.tsx b/packages/nreact/src/icons/copy.tsx
index 2bc5997e..78dca10e 100644
--- a/packages/nreact/src/icons/copy.tsx
+++ b/packages/nreact/src/icons/copy.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgCopy(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/default-page-icon.tsx b/packages/nreact/src/icons/default-page-icon.tsx
index 8ff548a8..efe3fb64 100644
--- a/packages/nreact/src/icons/default-page-icon.tsx
+++ b/packages/nreact/src/icons/default-page-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 export const DefaultPageIcon = props => {
diff --git a/packages/nreact/src/icons/empty-icon.tsx b/packages/nreact/src/icons/empty-icon.tsx
index ee01a407..8d160ade 100644
--- a/packages/nreact/src/icons/empty-icon.tsx
+++ b/packages/nreact/src/icons/empty-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 export const EmptyIcon = props => {
diff --git a/packages/nreact/src/icons/file-icon.tsx b/packages/nreact/src/icons/file-icon.tsx
index 37d3d9cf..9d75238b 100644
--- a/packages/nreact/src/icons/file-icon.tsx
+++ b/packages/nreact/src/icons/file-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 export const FileIcon = props => {
diff --git a/packages/nreact/src/icons/link-icon.tsx b/packages/nreact/src/icons/link-icon.tsx
index 07112cb8..cbfeb013 100644
--- a/packages/nreact/src/icons/link-icon.tsx
+++ b/packages/nreact/src/icons/link-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 export const LinkIcon = props => {
diff --git a/packages/nreact/src/icons/loading-icon.tsx b/packages/nreact/src/icons/loading-icon.tsx
index e0f670be..c152c310 100644
--- a/packages/nreact/src/icons/loading-icon.tsx
+++ b/packages/nreact/src/icons/loading-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 export const LoadingIcon = props => {
diff --git a/packages/nreact/src/icons/property-icon.tsx b/packages/nreact/src/icons/property-icon.tsx
index 0e312c83..f6f9f6ee 100644
--- a/packages/nreact/src/icons/property-icon.tsx
+++ b/packages/nreact/src/icons/property-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { PropertyType } from '@texonom/ntypes'
diff --git a/packages/nreact/src/icons/search-icon.tsx b/packages/nreact/src/icons/search-icon.tsx
index 02a8cf0b..e31347b6 100644
--- a/packages/nreact/src/icons/search-icon.tsx
+++ b/packages/nreact/src/icons/search-icon.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 export const SearchIcon = props => {
diff --git a/packages/nreact/src/icons/type-checkbox.tsx b/packages/nreact/src/icons/type-checkbox.tsx
index c3f184dc..fe58d3be 100644
--- a/packages/nreact/src/icons/type-checkbox.tsx
+++ b/packages/nreact/src/icons/type-checkbox.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeCheckbox(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-date.tsx b/packages/nreact/src/icons/type-date.tsx
index 24327d0d..1cbe9dce 100644
--- a/packages/nreact/src/icons/type-date.tsx
+++ b/packages/nreact/src/icons/type-date.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeDate(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-email.tsx b/packages/nreact/src/icons/type-email.tsx
index 32772733..817c4ec2 100644
--- a/packages/nreact/src/icons/type-email.tsx
+++ b/packages/nreact/src/icons/type-email.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeEmail(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-file.tsx b/packages/nreact/src/icons/type-file.tsx
index b846f598..de9838d8 100644
--- a/packages/nreact/src/icons/type-file.tsx
+++ b/packages/nreact/src/icons/type-file.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeFile(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-formula.tsx b/packages/nreact/src/icons/type-formula.tsx
index a807ebc5..57a0b4b2 100644
--- a/packages/nreact/src/icons/type-formula.tsx
+++ b/packages/nreact/src/icons/type-formula.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeFormula(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-github.tsx b/packages/nreact/src/icons/type-github.tsx
index 15cde0df..fd482236 100644
--- a/packages/nreact/src/icons/type-github.tsx
+++ b/packages/nreact/src/icons/type-github.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeGitHub(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-multi-select.tsx b/packages/nreact/src/icons/type-multi-select.tsx
index bdc3269c..d178d2e4 100644
--- a/packages/nreact/src/icons/type-multi-select.tsx
+++ b/packages/nreact/src/icons/type-multi-select.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeMultiSelect(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-number.tsx b/packages/nreact/src/icons/type-number.tsx
index 3f345089..d813e894 100644
--- a/packages/nreact/src/icons/type-number.tsx
+++ b/packages/nreact/src/icons/type-number.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeNumber(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-person-2.tsx b/packages/nreact/src/icons/type-person-2.tsx
index 7f4d3779..78719aca 100644
--- a/packages/nreact/src/icons/type-person-2.tsx
+++ b/packages/nreact/src/icons/type-person-2.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypePerson2(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-person.tsx b/packages/nreact/src/icons/type-person.tsx
index d5e246df..9a2ffe19 100644
--- a/packages/nreact/src/icons/type-person.tsx
+++ b/packages/nreact/src/icons/type-person.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypePerson(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-phone-number.tsx b/packages/nreact/src/icons/type-phone-number.tsx
index 0cd803cc..c98f9c13 100644
--- a/packages/nreact/src/icons/type-phone-number.tsx
+++ b/packages/nreact/src/icons/type-phone-number.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypePhoneNumber(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-relation.tsx b/packages/nreact/src/icons/type-relation.tsx
index 833911f2..8fa7aa23 100644
--- a/packages/nreact/src/icons/type-relation.tsx
+++ b/packages/nreact/src/icons/type-relation.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeRelation(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-select.tsx b/packages/nreact/src/icons/type-select.tsx
index aeaf4e69..88518bf8 100644
--- a/packages/nreact/src/icons/type-select.tsx
+++ b/packages/nreact/src/icons/type-select.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeSelect(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-text.tsx b/packages/nreact/src/icons/type-text.tsx
index 94d1f3c6..134490c7 100644
--- a/packages/nreact/src/icons/type-text.tsx
+++ b/packages/nreact/src/icons/type-text.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeText(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-timestamp.tsx b/packages/nreact/src/icons/type-timestamp.tsx
index 86168ad9..d642697c 100644
--- a/packages/nreact/src/icons/type-timestamp.tsx
+++ b/packages/nreact/src/icons/type-timestamp.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeTimestamp(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-title.tsx b/packages/nreact/src/icons/type-title.tsx
index 20fd40df..ef1b7319 100644
--- a/packages/nreact/src/icons/type-title.tsx
+++ b/packages/nreact/src/icons/type-title.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeTitle(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/icons/type-url.tsx b/packages/nreact/src/icons/type-url.tsx
index 344a6981..fe44b0aa 100644
--- a/packages/nreact/src/icons/type-url.tsx
+++ b/packages/nreact/src/icons/type-url.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 function SvgTypeUrl(props: React.SVGProps<SVGSVGElement>) {
diff --git a/packages/nreact/src/index.tsx b/packages/nreact/src/index.tsx
index 256d9310..8703ed1c 100644
--- a/packages/nreact/src/index.tsx
+++ b/packages/nreact/src/index.tsx
@@ -1,3 +1,4 @@
+'use server'
 export { NotionRenderer } from './renderer'
 
 export * from './block'
diff --git a/packages/nreact/src/next.tsx b/packages/nreact/src/next.tsx
index 6c10d962..9b2dd58c 100644
--- a/packages/nreact/src/next.tsx
+++ b/packages/nreact/src/next.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import isEqual from 'react-fast-compare'
diff --git a/packages/nreact/src/renderer.tsx b/packages/nreact/src/renderer.tsx
index 906b5c13..f4bda88c 100644
--- a/packages/nreact/src/renderer.tsx
+++ b/packages/nreact/src/renderer.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import mediumZoom from '@fisch0920/medium-zoom'
diff --git a/packages/nreact/src/third-party/collection-card.tsx b/packages/nreact/src/third-party/collection-card.tsx
index d857d847..c49d2c3b 100644
--- a/packages/nreact/src/third-party/collection-card.tsx
+++ b/packages/nreact/src/third-party/collection-card.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { ImageBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/third-party/collection-column-title.tsx b/packages/nreact/src/third-party/collection-column-title.tsx
index cd492d61..2a5be696 100644
--- a/packages/nreact/src/third-party/collection-column-title.tsx
+++ b/packages/nreact/src/third-party/collection-column-title.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { CollectionPropertySchema } from '@texonom/ntypes'
diff --git a/packages/nreact/src/third-party/collection-group.tsx b/packages/nreact/src/third-party/collection-group.tsx
index d097272f..e424b2e0 100644
--- a/packages/nreact/src/third-party/collection-group.tsx
+++ b/packages/nreact/src/third-party/collection-group.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { CollectionGroupProps } from '../types'
diff --git a/packages/nreact/src/third-party/collection-row.tsx b/packages/nreact/src/third-party/collection-row.tsx
index 87f83dc8..36490cae 100644
--- a/packages/nreact/src/third-party/collection-row.tsx
+++ b/packages/nreact/src/third-party/collection-row.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { PageBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/third-party/collection-view-board.tsx b/packages/nreact/src/third-party/collection-view-board.tsx
index 4b8d9cbc..23bc0266 100644
--- a/packages/nreact/src/third-party/collection-view-board.tsx
+++ b/packages/nreact/src/third-party/collection-view-board.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { PageBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/third-party/collection-view-gallery.tsx b/packages/nreact/src/third-party/collection-view-gallery.tsx
index 99681aa7..e0b626bd 100644
--- a/packages/nreact/src/third-party/collection-view-gallery.tsx
+++ b/packages/nreact/src/third-party/collection-view-gallery.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { PageBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/third-party/collection-view-list.tsx b/packages/nreact/src/third-party/collection-view-list.tsx
index 1788205e..7faabd2a 100644
--- a/packages/nreact/src/third-party/collection-view-list.tsx
+++ b/packages/nreact/src/third-party/collection-view-list.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { PageBlock } from '@texonom/ntypes'
diff --git a/packages/nreact/src/third-party/collection-view-table.tsx b/packages/nreact/src/third-party/collection-view-table.tsx
index 6e0af842..d1721ed9 100644
--- a/packages/nreact/src/third-party/collection-view-table.tsx
+++ b/packages/nreact/src/third-party/collection-view-table.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { useNotionContext } from '../context'
diff --git a/packages/nreact/src/third-party/collection-view.tsx b/packages/nreact/src/third-party/collection-view.tsx
index 091f9b90..403227be 100644
--- a/packages/nreact/src/third-party/collection-view.tsx
+++ b/packages/nreact/src/third-party/collection-view.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { CollectionViewProps } from '../types'
diff --git a/packages/nreact/src/third-party/equation.tsx b/packages/nreact/src/third-party/equation.tsx
index 38df63f8..b7324f04 100644
--- a/packages/nreact/src/third-party/equation.tsx
+++ b/packages/nreact/src/third-party/equation.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import Katex from '@matejmazur/react-katex'
diff --git a/packages/nreact/src/third-party/modal.tsx b/packages/nreact/src/third-party/modal.tsx
index 3d320b37..60f83cbd 100644
--- a/packages/nreact/src/third-party/modal.tsx
+++ b/packages/nreact/src/third-party/modal.tsx
@@ -1,3 +1,4 @@
+'use server'
 import Modal from 'react-modal'
 
 export { Modal }
diff --git a/packages/nreact/src/third-party/pdf.tsx b/packages/nreact/src/third-party/pdf.tsx
index d888e3af..d8005c86 100644
--- a/packages/nreact/src/third-party/pdf.tsx
+++ b/packages/nreact/src/third-party/pdf.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import { Document, Page, pdfjs } from 'react-pdf'
diff --git a/packages/nreact/src/third-party/property.tsx b/packages/nreact/src/third-party/property.tsx
index 91980d43..79331d21 100644
--- a/packages/nreact/src/third-party/property.tsx
+++ b/packages/nreact/src/third-party/property.tsx
@@ -1,3 +1,4 @@
+'use server'
 import React from 'react'
 
 import format from 'date-fns/format/index.js'
diff --git a/test/components-render.test.tsx b/test/components-render.test.tsx
new file mode 100644
index 00000000..bb9f5d32
--- /dev/null
+++ b/test/components-render.test.tsx
@@ -0,0 +1,154 @@
+import { describe, test, expect } from 'vitest'
+import React from '../packages/nreact/node_modules/react'
+import { renderToReadableStream } from '../packages/nreact/node_modules/react-dom/server.edge'
+import { NotionContextProvider } from '../packages/nreact/src/context'
+import {
+  Block,
+  AssetWrapper,
+  Asset,
+  Audio,
+  Checkbox,
+  EOI,
+  File,
+  GoogleDrive,
+  GracefulImage,
+  LazyImage,
+  LiteYouTubeEmbed,
+  PageIcon,
+  PageTitle,
+  SyncPointerBlock,
+  Text
+} from '../packages/nreact/src'
+import type { Block as BlockType } from '../packages/ntypes/src/block'
+
+const emptyRecordMap = {
+  block: {},
+  collection: {},
+  collection_view: {},
+  notion_user: {},
+  collection_query: {},
+  signed_urls: {}
+}
+
+const baseBlock: BlockType = {
+  id: 'page',
+  type: 'page',
+  properties: { title: [['Test']] },
+  parent_id: '',
+  parent_table: 'space',
+  version: 1,
+  created_time: 0,
+  last_edited_time: 0,
+  alive: true,
+  created_by_table: 'user',
+  created_by_id: '',
+  last_edited_by_table: 'user',
+  last_edited_by_id: ''
+} as any
+
+const audioBlock: BlockType = {
+  ...baseBlock,
+  id: 'audio',
+  type: 'audio',
+  properties: { source: [['https://example.com/audio.mp3']] }
+} as any
+
+const fileBlock: BlockType = {
+  ...baseBlock,
+  id: 'file',
+  type: 'file',
+  properties: {
+    title: [['File']],
+    size: [['1']],
+    source: [['https://example.com/file.pdf']]
+  }
+} as any
+
+const googleDriveBlock: BlockType = {
+  ...baseBlock,
+  id: 'gd',
+  type: 'google_drive',
+  format: { drive_properties: { url: 'https://drive.google.com/file/d/abc' } }
+} as any
+
+const eoiBlock: BlockType = {
+  ...baseBlock,
+  id: 'eoi',
+  type: 'embed',
+  format: {
+    original_url: 'https://github.com',
+    domain: 'github.com',
+    attributes: [{ id: 'title', values: ['Repo'] }]
+  }
+} as any
+
+async function renderElement(element: React.ReactNode) {
+  const stream = await renderToReadableStream(
+    <NotionContextProvider recordMap={emptyRecordMap}>{element}</NotionContextProvider>
+  )
+  const reader = stream.getReader()
+  const chunk = await reader.read()
+  expect(chunk.done).toBe(false)
+}
+
+describe('individual component rendering', () => {
+  test('Block', async () => {
+    await renderElement(<Block block={baseBlock} level={0} />)
+  })
+
+  test('AssetWrapper', async () => {
+    await renderElement(<AssetWrapper blockId='file' block={fileBlock} />)
+  })
+
+  test('Asset', async () => {
+    await renderElement(<Asset blockId='file' block={fileBlock} />)
+  })
+
+  test('Audio', async () => {
+    await renderElement(<Audio block={audioBlock} />)
+  })
+
+  test('Checkbox', async () => {
+    await renderElement(<Checkbox isChecked={true} blockId='page' />)
+  })
+
+  test('EOI', async () => {
+    await renderElement(<EOI block={eoiBlock} />)
+  })
+
+  test('File', async () => {
+    await renderElement(<File block={fileBlock} />)
+  })
+
+  test('GoogleDrive', async () => {
+    await renderElement(<GoogleDrive block={googleDriveBlock} />)
+  })
+
+  test('GracefulImage', async () => {
+    await renderElement(<GracefulImage src='image.png' />)
+  })
+
+  test('LazyImage', async () => {
+    await renderElement(<LazyImage src='image.png' />)
+  })
+
+  test('LiteYouTubeEmbed', async () => {
+    await renderElement(<LiteYouTubeEmbed id='dQw4w9WgXcQ' />)
+  })
+
+  test('PageIcon', async () => {
+    await renderElement(<PageIcon block={baseBlock} />)
+  })
+
+  test('PageTitle', async () => {
+    await renderElement(<PageTitle block={baseBlock} />)
+  })
+
+  test('SyncPointerBlock', async () => {
+    await renderElement(<SyncPointerBlock block={baseBlock} level={0} />)
+  })
+
+  test('Text', async () => {
+    await renderElement(<Text value={[]} block={baseBlock} />)
+  })
+})
diff --git a/test/rsc-render.test.tsx b/test/rsc-render.test.tsx
new file mode 100644
index 00000000..61c10019
--- /dev/null
+++ b/test/rsc-render.test.tsx
@@ -0,0 +1,41 @@
+import { test, expect } from 'vitest'
+import React from '../packages/nreact/node_modules/react'
+import { renderToReadableStream } from '../packages/nreact/node_modules/react-dom/server.edge'
+import { NotionRenderer } from '../packages/nreact/src/renderer'
+import type { ExtendedRecordMap } from '../packages/ntypes/src/maps'
+
+const recordMap: ExtendedRecordMap = {
+  block: {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    '1': {
+      role: 'reader',
+      value: {
+        id: '1',
+        type: 'page',
+        properties: { title: [['Test']] },
+        parent_id: '',
+        parent_table: 'space',
+        version: 1,
+        created_time: 0,
+        last_edited_time: 0,
+        alive: true,
+        created_by_table: 'user',
+        created_by_id: '',
+        last_edited_by_table: 'user',
+        last_edited_by_id: ''
+      }
+    }
+  },
+  collection: {},
+  collection_view: {},
+  notion_user: {},
+  collection_query: {},
+  signed_urls: {}
+}
+
+test('server component renders to stream', async () => {
+  const stream = await renderToReadableStream(<NotionRenderer recordMap={recordMap} />)
+  const reader = stream.getReader()
+  const chunk = await reader.read()
+  expect(chunk.done).toBe(false)
+})