Introduction

In the latest version of Oqtane, version 5.1, developers are presented with the opportunity to incorporate Static Server rendering into their Oqtane modules. This innovative feature operates exclusively on the server, eliminating the need for interactive infrastructure such as WebAssembly or SignalR. It is crucial to understand that Static Server rendering is stateless, necessitating developers to adapt their component development strategies accordingly. This comprehensive document aims to provide detailed guidance on effectively developing static components within Oqtane 5.1.

Key Aspects of Static Component Development

HTML Form Element

- Incorporate a standard HTML form element with a post method to facilitate data submission.

- Ensure the @formname attribute remains unique to maintain static value integrity.

- Define an @onsubmit event handler that corresponds to a method within the component for seamless form submission.

- Optionally, enhance navigation capabilities in Blazor by utilizing the data-enhance attribute.

Antiforgery Token

- Include a hidden input element named __RequestVerificationToken to prevent cross-site request forgery attacks.

- Retrieve the token value from the SiteState service to ensure secure form submissions.

Input Elements

- Assign a name attribute to input elements to enable efficient data binding.

- Utilize the name attribute to access field values within the onsubmit method for streamlined form processing.

Button Element

- Ensure that buttons have a type="submit" attribute to trigger form submission effectively.

Render Mode Override

- Override the RenderMode property from the base component class if the component is intended to be static.

SupplyParameterFromForm Parameter

- Implement SupplyParameterFromForm parameters for each input element within the form to streamline parameter handling.

- Optionally specify the FormName to ensure accurate parameter population from the designated form.

- Align parameter names with input element names in the form for seamless data flow.

Asynchronous Method

- Include an asynchronous method that corresponds to the @onsubmit attribute on the form for efficient form submission handling.

Considerations

- Static forms developed using the outlined techniques exhibit consistent functionality across both static and interactive render modes.

- Complex forms with numerous input elements and buttons may introduce verbosity and complexity, requiring careful design considerations.

- Certain static capabilities may exhibit inconsistencies across different render modes, necessitating thorough testing.

- Notably, capturing onchange events on select elements in static rendering lacks a direct equivalent technique, requiring alternative approaches for event handling.

Conclusion

While the development of static components in Oqtane 5.1 offers enhanced versatility, it is essential to recognize that advanced data entry forms may be better suited for interactive rendering due to potential complexities and inconsistencies. Developers are encouraged to carefully evaluate the trade-offs and select the rendering approach that aligns best with the specific requirements of their projects.

By adhering to the detailed techniques and considerations outlined in this document, developers can effectively navigate the intricacies of developing static server components in Oqtane 5.1, ensuring optimal performance and functionality in their applications.

References

- Oqtane Documentation

- Blazor Documentation

This detailed technical blog serves as a comprehensive resource for experienced developers looking to leverage the Static Server rendering capabilities within their Oqtane modules.