Cannot render my block outside edit mode

[C0casio45]

Hello,

I have developped a plugin that register one block
This block needs to retrieve information from an API
Everything is working fine in the edit mode (no error message, working as expected)
But nothing except the block container is showing up outisde edit mode

TutorialCard.js

import {getTutorials} from '../utils';

class TutorialCard extends React.Component {
  constructor() {
    super();
    this.state = { data: [], loaded : false };
  }
  
  async componentDidMount() {
    let tutorials = await getTutorials();
    console.log(tutorials);
    this.setState({ data : tutorials, loaded : true });
  }

  render() {
    const data = this.state.data;
    // if(!this.state.loaded) {
    //   return (<p>Loading...</p>);
    // } 
    // if(data.length == 0) {
    //   return (<p>{ 'This page offers special deals for our education clients. Contact us to be a part of our students community.' }</p>)
    // }
    return (data.map((item) => (
      <a href={item.permalink} className="PM-tutorial-card">
        <figure className="PM-tutorial-card-img"><img src={item.image} alt={"Tutorial " + item.title} /></figure>
        <div className="PM-tutorial-card-info">
          <h3>{item.title}</h3>
          <p dangerouslySetInnerHTML={{__html: item.description}} />
        </div>
      </a>
    )));
  }
}

export default TutorialCard;

save.js

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * The save function defines the way in which the different attributes should
 * be combined into the final markup, which is then serialized by the block
 * editor into `post_content`.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#save
 *
 * @return {WPElement} Element to render.
 */

import TutorialCard from './model/tutorialCard';

export default function save() {
	return (
		<div { ...useBlockProps.save() }>
			<TutorialCard />
		</div>
	);
}

edit.js

/**
 * Retrieves the translation of text.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-i18n/
 */
import { __ } from '@wordpress/i18n';

/**
 * React hook that is used to mark the block wrapper element.
 * It provides all the necessary props like the class name.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/packages/packages-block-editor/#useblockprops
 */
import { useBlockProps } from '@wordpress/block-editor';

/**
 * Lets webpack process CSS, SASS or SCSS files referenced in JavaScript files.
 * Those files can contain any CSS code that gets applied to the editor.
 *
 * @see https://www.npmjs.com/package/@wordpress/scripts#using-css
 */
import './editor.scss';

/**
 * The edit function describes the structure of your block in the context of the
 * editor. This represents what the editor will render when the block is used.
 *
 * @see https://developer.wordpress.org/block-editor/reference-guides/block-api/block-edit-save/#edit
 *
 * @return {WPElement} Element to render.
 */

import TutorialCard from './model/tutorialCard';


export default function Edit() {
	
	return (
		<div { ...useBlockProps() }>
			<TutorialCard />
		</div>
	);
}

edit mode display

I use @wordpress/create-block
Static text is rendering well on both save and edit mode

[t-hamano]

I think save.js defines the markup to be stored in the database. It will be output as static markup on the front end, so it will not work as a React app.

If the API you have prepared is accessible in PHP and the block is not reactive on the front end, you could access the API with the render_callback function and render the results dynamically.

[C0casio45]

Uh in this case there is no way to call an API with it ?! (direclty from js)

And that's weird that everything working well in edit.js mode but not in save.js

And the API is an intern API (custom taxonomy)

[t-hamano]

Uh in this case there is no way to call an API with it ?! (direclty from js)

If you need to retrieve your own data, apiFetch may be useful.

And that's weird that everything working well in edit.js mode but not in save.js

Since save.js defines the markup to be saved to the database, I think it is expected that it does not work the same way as edit.js. This discussion may be a good place to start on how to get React working on the front end!

[C0casio45]

If you need to retrieve your own data, apiFetch may be useful.

I am already using it

import apiFetch from "@wordpress/api-fetch";

export function getTutorials() {
	return apiFetch({  
		path: '/tutorials/v1/search'
	});
}

#34702 may be a good place to start on how to get React working on the front end!

Yea I saw that during my researche that woocommerce achieve this by using a specific method

[t-hamano]

Then you can run that component on the frontend.
However, as I said before, writing it in save.js will not work.

You need to explicitly build the React app on the front end.

[C0casio45]

I saw that in my researches on how all of these work. Thanks for your help !